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.