NEXT.JS + pRE-Rendering on my own.

Pre-rendering

• By default, Next.js use pre-render process for every page. That's mean Next.js framework generated HTML on the Server-Side instead of Client-Side as React.js library.
• Each time generate HTML, this page is an associate with code Javascript necessary. Every request is load HTML then this Javascript code run and interactive fully, we named this process is hydration.

Static generation

• HTML will be generated at the build time - npm run build and reuse every request. That's mean HTML has exist in the server and the framework doesn't need to generate HTML anymore.

Server-side rendering

• HTML will be generated at the request of the browser or end user. That means HTML not exist in the server and the framework will generate HTML for every request from the browser.

What we can choose between Static Generation and Server-Side rendering?

• Before we choose the method for the page. We must define the purpose keys of the page what we want. I recommend that is the data dependence. If the page has the content not change by the time. We must be using Static Generation and in the contrast we must be using Server-side rendering, a page has the content data changing time by time.
• Static generation is recommended by NEXT.JS, because the page has created in the server and it's generated at one time and CDN - Content Delivery Network will send the content to request. That mean, the end user or the browser will see the content is faster generate HTML for every request.
• It's so bad if the page can't pre-render before the time of the request. For many the reasons, the data changes time by time as the comment of the post, the quantity of product,... In this case, Sever-side rendering is a good choice.

Static generation with data and data.

• Basically, the page has not required external data. Next.JS can generate HTML at the build time in production mode.
• But if the page is dependent on other data as file systems, external API, the query of the database, Next.JS has supported generate HTML with external data.
• Static Generation with Data is using getStaticProps. For a page export this function with async and named getStaticProps:
  • getStaticProps will run at the build time.
  • Function will fetch data into props properties for the page.

export default function ExamplePage({ props }) {
    return ( ... );
} 

export async function getStaticProps() {
   const data = await fetch('...');
   return {
       props: data
   }
}

• getStaticProps only run at Server-side. That means this function never runs on the client-side. Never bundle code in the browser. Never the query database on the client-side. It's only run on server-side.
• But this method has a cons. The content of the page never changes at the time of request with dynamic params of URL from the end-user or the browser then the content of the page can't apply for the request of the client. That is the reason we need to use the getStaticPaths function to resolve on dynamic params from URL.

export default function ExamplePage({ props }) {
    return ( ... );
}

export async function getStaticPaths() {
   return {
    paths: [
      { params: { id: '1' } },
      { params: { id: '2' } }
    ],
    fallback: true
  };
}

export async function getStaticProps(context) {
   const data = await fetch('...');
   return {
       props: { data }
   }
}

Server-side Rendering

export async function getServerSideProps(context) {
  return {
    props: {
      // props for your component
    }
  }
}

• Because getServerSideProps is called in every request, so the context params in function are always have data the from request which means fetch data is called for every request then the data is changing for time by time.
• It's really great for dynamic data of content, but in the contrast, the TTFB - Time to first byte is lower getStaticProps. Because the server will compute the result for every request.

Client-side rendering.

• When a page has purpose below, the client-side rendering should be used:
  • A part of the page is static and not require other external data.
  • When a page is loaded, fetch data will be Javascript client do and show them to component or part of the page.
  • Using for dashboard or private page.

SWR

• Is React hook of NextJS created. And they recommend we must be using this method to fetch other data in client-side.

Comments

[shadowtime2000]

For dynamic content that isn't private you can use incremental static regeneration so that the page regenerates at a certain interval but has the same benefits as a static page.

[Ha Tuan Em]

That is new terms which I don't know. Thanks bro. I save your words.