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>
  )
}

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.

Comments

[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...

[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!