DEV Community

Lautaro Suarez
Lautaro Suarez

Posted on

2

Server side rendering with NextJs

Introduction

This is just mean to be a short introduction on how to use ssr, if you should use it in your project and understanding how it actually works.

What's the difference between SSR and CSR?

Well there is a couple differences but the main one is that SSR runs on the server giving a a lighter javascript bundle to the web which makes it run faster whereas CSR or cliente side rendering does everything on the browser which could be helpful but it could make the experience slower if we are not using it the right way.

How to use it in NextJS?

NextJs by default will understand that you are using a server component unless you actually tell him to that you want a client component. For instance if you are trying to add a onClick in a component you will receive an error since you can not manage client side requests on the server and you will to tell it at the top of the component that this should be a cliente component.

Button.js

'use client'

import { useState } from 'react'

export default function Counter() {
  const [count, setCount] = useState(0)

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  )
}
Enter fullscreen mode Exit fullscreen mode

The example above us is an example on how we have to put at the top of the file "use client" for nextJS to understand that this is going to be a client server component. Is also a good example cause we are using state too which can`t be use in ssr either.
If you want a depth explanation i'll leave this nextjs documentation.

Should you use it?

Well it really depends, there is a lot of adavantages regarding using SSR but these adavantages are not for every project. Altough i'm going to give to you some good example of when it would be a good approach to use it.

  • Blog: In a blog there is a lot of static things such as img, links, text, etc. All this static things could be render on the server to avoid having an enormous js bundle when is not needed.
  • Ecommerce.

In other cases i would consider if the best option is SSR since you have a lot javascript functionalities in the client side, the best option for you could be use a CSR such as react to have a better experience.

Conclusion

This is a very short explanation but i would be glad to help you if you have any concerns about SSR or CSR, let me know on the comments.

Cheers.

👋 While you are here

Reinvent your career. Join DEV.

It takes one minute and is worth it for your career.

Get started

Top comments (2)

Collapse
 
pavelee profile image
Paweł Ciosek •

Hey! SSR should be our first choice, that make sens we have to declarative say "use client". I like this direction and I think it's worth cost of "chaos" about whole React Server Component

It's pretty fascinating we are going back to old times when everything was going on server side (those old school HTML pages generate by index.php ). I like this direction, it's so more optimal. For example: vercel.com/blog/introducing-react-... and key point: "35x less client-side JavaScript than the Twitter's Native embed" Wow! So great!

It's important to mention React Server Component is part of React 18 changes (not Next.js itself), there is great post about it:
vercel.com/blog/how-react-18-impro...

Collapse
 
lausuarez02 profile image
Lautaro Suarez •

Really good comment to explain more in depth, indeed SSR should always be the first choice but is not always the first choice 🫠.

Yeah, we are literally going back to what it used to be.

Thanks so much Pawel!

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay