Hybrid Mode Rendering (SSCR)

SSCR is the abbreviation of the hybrid mode of server-side rendering (SSR) and client-side rendering (CSR). SSR and CSR modes have their own advantages and disadvantages. The hybrid mode combines the two. Combining their respective advantages and making up for their shortcomings. This mode is very complicated to implement, but it has been optimized in the framework, and this function can be easily implemented.

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

import SSCR from '@ndsk/sscr';
import Styled from '@emotion/styled';
const Container = Styled.div({ display:'flex',flexDirection:'row',position:'relative',border:'1px #DDDDDD solid',});
const Menu = Styled.div({  width:300});
const Main = Styled.div({ display:"flex",justifyContent:'center',alignItems:'center',flexGrow:1});
export default (props)=>{  
    return (
      <html lang="en">
        <head>
          <title>{props.title}</title> 
        </head>
        <body> 
            <h1>layout1</h1>
            <Container>
                <Menu>
                    <ul>
                        <li><a href='/sscr'>Home</a></li>
                        <li><a href='/sscr/about'>About</a></li>
                        <li><a href='https://www.google.com/' target='_blank'>Google</a></li>
                    </ul>
                </Menu>
                <Main>
                    <SSCR>{props.children}</SSCR>
                </Main>
            </Container>
        </body>
      </html>
    );
}

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

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

export default (request)=>{
    return {title:"SSCR"}
}
  • As shown above, we only need to import the @ndsk/sscr module and use SSCR to wrap props.children in layout.js to achieve it
import SSCR from '@ndsk/sscr';
<SSCR>{props.children}</SSCR>
  • Visit http://127.0.0.1:3000/sscr and click Home about to view. You will find that clicking a link will not jump to refresh the page, but only load the corresponding js file and api request. All these operations will be automatically handled by the framework.

Notes

  • Only use SSCR to wrap props.childern in the first layout.js file. Do not wrap it repeatedly in the lower directory files, which will cause repeated requests.

  • SSCR can only wrap props.childern, and cannot wrap other elements in it

  • Jumping to the a link route should be included in the current route. If it does not belong to the current route, it will cause the current page to refresh

Use with SSG to reduce server pressure

  • Add index.js about.js in the scr/routes/sscr directory, and enter the following code. You can view how to configure SSG here
export const SSG = 1
export default (request)=>{
    return {}
}

export const SSG = 1
export default (request)=>{
    return {}
}
  • Execute in terminal
$ npm run build
$ npm run start

Next

Server Configuration