Please enable JavaScript.

Coggle requires JavaScript to display documents.

Next.js - Coggle Diagram

- - - - Pre-render improves performance
        
        -In a React app, you need to wait for the JavaScript to be executed.
        
        Perhaps fetch data from an external api and then render the UI
        
        There is wait time for the user
        
        with a pre-rendered page, the HTML is already generated and loads faster.
      - Pre-rendering helps with SEO
        
        if you're building a blog or an e-commerce site, SEO is a concern
        
        with React app, if the search engine hits your page, it only sees a div tag with id equal to root
        
        if search engine hits a pre-rendered page though, all the content is present in the source code which help index that page
        
        If SEO is of concern for your app, pre-rendering is what you want
    - - Pre-rendering refers to the process of generating HTML with the necessary data for a page in our application
      - Pre-rendering can result in better performance and SEO
  - - - without data
      - with data
      - incremental static Generation
      - dynamic parameters when fetching data
      - A method of generating where the HTML pages are generated at build times.
      - The HTML with all the data that makes up the content of the web pages are generated in advance when you build your application
      - Recommended method to pre-render pages whenever possible
      - Page can be built once, cached by a CDN and served to the client almost instantly
      - Ex. blog pages, e-commerce Product pages,documentation and marketting pages.
      - summaries
        
        static Generation is a method of pre-rendering where the HTML pages are generated at buil time
        
        with and without external data
        
        export staticProps function for external data
        
        HTML, javascript and a json file are generated
        
        if you navigate directly to the page route, the HTML file is served
        
        if you navigate to the page route from a different route, the page is created client side using the javascript and JSON prefetched from the server
      - getStaticPath and fallback
        
        fallback: false, fallback: true, fallback: pending
        
        getStaticPaths fallback: false - when?. The false value is most suitable if you have an application with a small number of paths to pre-render.
        
        When new pages are not added often.
        
        A blog site with a few articles is a good example for fallback set to false
        
        getStaticPaths fallback: true - 1. The paths returned from getStaticPaths will be rendered to HTML at build time by getStaticProps
        
        The paths that have not been generated at build time will not result in a 404 page. Instead, Next.js will srve a "fallback" version of the page on the first request to such a path.
        -3. In the background, Next.js will statically generate the requested path HTML and JSON. This includes running getStaticProps
        -4. When that's done, the browser receives the JSON for the generated path. This will be used to automatically render the page with the required props. From the user's perspective, the page will be swapped from the fallback page to the full page.
        -5. At the same time, Next.js keeps track of the new list of pre-rendered pages. Subsequent requests to the same path will serve the generated page, just like other pages pre-rendered at build time.
        
        The paths returned from getStaticPaths will be rendered to HTML at build time by getStaticProps
        
        If fallback is set to false, then any paths not returned by getStaticPaths will result in a 404
    - - data fetching
        
        getStaticProps
        
        getStatic props run only in the server side
        
        The fetch will never run on client side
        
        The code you write inside the getStaticProps won't even be included in the js bundle that is sent to the browser
        
        you can write server side code directly in getStaticProps
        
        Accessing the file system using the fs module or querying a database can be done inside getStaticProps
        
        getStaticProps is allowed only in a page and cannot run from a regular component file
        
        it is use only for pre-rendering and not client-side data fetching
        
        getStaticProps should return an object and object should contain a props key which is an object
        
        getStatic props will run on build time
        
        In dev mood, getStaticProps runs on every request