Rendering mode

  • The framework uses server-side rendering (SSR) by default. Click here for a detailed introduction to server-side rendering

  • **There are two common problems with server-side rendering (SSR): **Poor page switching experience and increased server load

  • We can use a hybrid mode (SSCR) consisting of server-side and client-side rendering to solve the above defects. This mode combines the advantages of SSR and CSR, and is safe, fast loading, conducive to SEO, and smooth interaction. Click here to view a detailed introduction to the hybrid mode

  • Hybrid mode example:

my-nodestack-app
├── src
│   ├── pages
│   │   │── sscr                    
│   │   │   │── index.js   
│   │   │   │── about.js   
│   │   │   │── layout.js  
│   │   │   │── app   
│   │   │   │   │── index.js 
│   │   │   │   │── layout.js    
├── ndsk.config.js
└── package.json

import SSCR from '@ndsk/sscr'
export default (props)=>{  
    return (
      <html lang="en">
        <head>
          <title>{props.title || 'sscr'}</title> 
        </head>
        <body>
            <div><a href="/sscr/index">to index</a></div>
            <div><a href="/sscr/about">to about</a></div>
            <div><a href="/sscr/app">to app</a></div>
            <SSCR>{props.children}</SSCR>
        </body>
      </html> 
    );
}

export default (props)=>{
    return (
        <div>sscr/index</div>
    )
}

export default (props)=>{
    return (
        <div>app/about</div> 
    )
}

export default (props)=>{
    return (
        <div>
            <h1>{props.name}</h1>
            {props.children}
        </div>
    )
}

export default (props)=>{
    return (
        <div>{props.name || '/app/index'}</div>
    )
}
  • Add routing configuration file to pass initial data to the page props
my-nodestack-app
├── src
│   ├── routes
│   │   │── sscr      
│   │   │   │── layout.js  
│   │   │   │── app   
│   │   │   │   │── index.js 
│   │   │   │   │── layout.js    
├── ndsk.config.js
└── package.json

export default ({path})=>{
    return {
        title:path
    }
}

export default ()=>{
    return {
        name:'this is app path'
    }
}

export default ()=>{
    return {
        name:'app layout'
    }
}
  • Execute in the terminal separately
$ npm run dev
$ npm run build
$ npm run start

  • 访问 http://localhost:3000/sscr

  • Note: Using SSCR mode will increase the compilation time. If it affects you, you can configure the development environment in ndsk.config.js to turn off sscr

module.exports = (isPro)=>{
    return {
        esbuild:{
            sscr:!!isPro
        }
    }
}

Use SSG to reduce server pressure

  • You can enable SSG mode in the routing configuration to reduce server pressure. This mode has a fast first load speed, about 2 times faster than other modes, and is very beneficial to SEO. The disadvantage is that it will continue to increase disk space. Here View the detailed introduction of SSG mode
export const SSG = true
export default ()=>{
    return {
        name:'this is app path'
    }
}

Next step

Dynamic loading