DEV Community

Cover image for Client-Side SSR: Build a Component-Based Landing Page in 10 Minutes⏱️

Client-Side SSR: Build a Component-Based Landing Page in 10 Minutes⏱️

Anthony Max on April 27, 2025

Today, it is impossible to imagine a modern large project without using Next.js or Nuxt.js. But, nevertheless, if the task is to quickly create su...
Collapse
 
svedova profile image
Savas Vedova

Thanks for the article!

Today, it is impossible to imagine a modern large project without using Next.js or Nuxt.js.

I'd argue the opposite. I wouldn't choose a framework for a large project. They are mostly opinionated and limiting when it comes to edge cases (which often happen with larger projects).

Collapse
 
anthonymax profile image
Anthony Max HMPL.js

Next.js is used by Spotify and ChatGPT. I'd like to believe there are home-grown solutions, but that's basically it.

Collapse
 
aloisseckar profile image
Alois Sečkár

This is pretty much like having your home bakery or run your own small dairy farm. It is not THAT hard and the result would easilly be more tasty (and healthy) than mass produced groceries from store. But it is REALLY worth your time and effort?

I rather think what to build with existing tools than creating new homemade solutions with limited usage.

But it is up to everyone's preference of course.

Collapse
 
anthonymax profile image
Anthony Max HMPL.js

Yes, no one is discouraging you from using Next.js, it's just an alternative, as some solutions are not suitable for some business cases.

Collapse
 
nevodavid profile image
Nevo David

Nice, this reminds me how much setup is really optional. Im always tempted to just grab a framework, but sometimes its fun to build the pieces yourself. you ever find it worth skipping the big tools or does it just end up messy after a while?

Collapse
 
nevodavid profile image
Nevo David

honestly the whole fast-build vibe here kinda fits how i do things when i wanna skip extra setup, feels good to see this broken down so simple

Collapse
 
nabin_bd01 profile image
Nabin Bhardwaj

his explanation is very good.

Collapse
 
anthonymax profile image
Anthony Max HMPL.js

Yes

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
anthonymax profile image
Anthony Max HMPL.js

Thank you! Of course it was possible, yes.

Collapse
 
daveordead profile image
Dave Berner • Edited

Thanks so much for sharing this tutorial! I love the creative approach and that you're questioning the status quo (we use Go + vanilla JS so also don't subscribe to the NextJS dogma)

I would say though, that while this approach works great for prototyping, there are some performance implications worth considering for production use:

The current setup makes 5+ sequential HTTP requests on page load (one per component), which can significantly impact loading performance. You might want to consider batching these into a single API call or using HTTP/2 server push.

Since the page starts empty and populates via JavaScript, users will see a blank page initially. This affects Core Web Vitals metrics like First Contentful Paint (FCP) and Cumulative Layout Shift (CLS).

I know you mentioned this at the end about the robots.txt file, but search engines may not index the content properly since it's loaded dynamically after the initial HTML.

I can see it would be useful for internal tools where SEO isn't a concern or quick prototyping

Again, I love the thinking outside the box - thanks for sharing the approach :) I'd love to see a follow-up post exploring some of the performance concerns mentioned above.

Collapse
 
omar_hossam profile image
Omar Hossam

What is Next.js & Nuxt.js, and why we can't build modern large projects without them??

Collapse
 
anthonymax profile image
Anthony Max HMPL.js

Frameworks

Collapse
 
omar_hossam profile image
Omar Hossam

Okay, so why we cant build modern websites without them?

Thread Thread
 
anthonymax profile image
Anthony Max HMPL.js

We can, it just takes a long time.

Collapse
 
anthonymax profile image
Anthony Max HMPL.js

It was possible to take not only the landing page, but it is simply the main page on any site, so it was taken.