Static Site Generation (SSG)

SSG is the abbreviation of Static Site Generation, which is a technology that generates static HTML pages at build time. In this mode, developers will write some template files and data files, and then use the build tool to convert these files into static HTML pages. These pages can be deployed directly to the server without the need for real-time rendering by the server.

Advantages of SSG:

  • Loads very fast: Since the page is static, it does not need to be rendered from the server, and is directly loaded and displayed by the browser, with excellent performance, and the loading speed is at least 2-10 times faster than SSR

  • More SEO-friendly: Similar to server-side rendering, search engine crawlers can directly crawl the final page content, which is conducive to indexing and ranking

  • Easy to deploy: The generated static pages can be directly deployed to any web server that supports static files, without relying on the Node environment, etc.

Disadvantages of SSG:

  • Poor support for dynamic content: Since the page is generated at build time and will not be dynamically updated according to user requests, it has poor support for some dynamic content (such as user-generated content)

  • Updated content needs to be rebuilt: When the page content needs to be updated, the entire application needs to be rebuilt and redeployed

How to configure (SSG) in the framework

my-nodestack-app
├── src
│   ├── pages
│   │   │── ssg      
│   │   │   │── index.js
│   ├── routes
│   │   │── ssg      
│   │   │   │── index.js 
├── ndsk.config.js
└── package.json

export default (props)=>{  
    return (
      <html lang="en">
        <head>
          <title>SSG</title> 
        </head>
        <body> 
            {props.title} 
        </body>
      </html>
    );
}

export const SSG = { id:'title'}
export default (request)=>{
    const title = request.query.title || 'SSG'
    return {title}
}
  • Visit http://127.0.0.1:3000/ssg?title=test
  • Press F2 to check and you will find that no static HTML is generated. This is because the SSG mode will only take effect in the production environment. Execute the following command in the terminal to compile and start the project
- 在终端执行
$ npm run build
$ npm run start
  • Visit http://127.0.0.1:3000/ssg?title=test again and refresh the page, then press F2 to view
  • Visit the above link, you will find that static page loading has been implemented, but no script script files have been loaded. This is because there is no setting to allow the loading of script scripts. If you need to configure the loading script, you can configure the above SSG as follows:
export const SSG = {
    id:'title',      //Dynamically generate HTML page based on title parameter      
    script:true
}

  • As for why script is configured separately, it is mainly for some websites that do not require interaction, to reduce unnecessary static resource requests, because deleting script files has no effect, such as some document websites, or blog sites, etc.

  • SSG can be a string, Boolean value, array or object. When it is an object, it is configured as follows:

    • id Generate static page parameters based on url
    • script Whether to load the script file

  • If SSG is equal to true, it means that only HTML is generated according to the current URL, and HTML will not be dynamically generated according to the URL parameters. No matter how the URL parameters are modified, the page will never change, and the script file will not be loaded. Generally, this is rarely needed because the html file can be directly rendered.

  • If SSG is equal to a string, the same as above, but the script file will be loaded

export const SSG = true    //The script file will not be loaded
//export const SSG = 1     //The script file will be loaded

How to update the generated html static file

  • Modify the src/routes/ssg/index.js file content as follows:
export const method = ['get','post']  
export const SSG = {
    id:'title',
    script:false
}
export default (request)=>{
    const title = request.query.title || 'SSG'
    if(request.method === 'post' && request.query.shell === 'update'){
        request.updateSSG('test'); //  Update title to be equal to the HTML file generated by test
        return {title}
    }else{
      return {title}
    }
}
  • Use request.updateSSG() to update. As shown above, if the request type is equal to post, and the shell parameter in url is equal to update, then the title parameter needs to be updated to be equal to the html file generated by test. This makes it easier for users to update a single html file generated in the background instead of updating all of them each time.
  • Use post to request http://127.0.0.1:3000/ssg?shell=update. The next visit will update the static page.
  • Note: You must use the post request to update, because the get request directly returns static html and does not perform any routing operations.

Next step

Mixed mode rendering