Data acquisition

  • It is very simple to obtain server-side data. Just set the initial data for the page in the routing configuration file
my-nodestack-app
├── src
│   ├── pages
│   │   │── get_data                    
│   │   │   │── index.js   
│   │   │   │── about.js   
│   │   │   │── layout.js  
│   │   │   │── app   
│   │   │   │   │── index.js 
│   │   │   │   │── layout.js   
├── ndsk.config.js
└── package.json

export default (props)=>{  
    return (
      <html lang="en">
        <head>
          <title>{props.title}</title> 
        </head>
        <body> 
        <div>
            <div><a href='/get_data/index'>index</a></div>
            <div><a href='/get_data/about'>about</a></div>
            <div><a href='/get_data/app'>app</a></div>
        </div>
        <div>{props.children}</div>
        </body>
      </html>
    );
}

export default (props)=>{
    return (
        <div>path：{props.path}</div>
    )
}

export default (props)=>{
    return (
        <div>path：{props.path}</div>
    )
}

export default ({name,children})=>{  
    return (
      <div>
        <h1>{name}</h1>
        {children}
      </div>
    );
}

export default (props)=>{
    return (
        <div>path：{props.path}</div>
    )
}
  • Create the corresponding configuration file in the src/routes directory and set the initial data
my-nodestack-app
├── src
│   ├── routes
│   │   │── get_data                    
│   │   │   │── index.js   
│   │   │   │── about.js   
│   │   │   │── layout.js  
│   │   │   │── app   
│   │   │   │   │── index.js 
│   │   │   │   │── layout.js   
├── ndsk.config.js
└── package.json

export default (request)=>{
    return {title:"get data"}
}

export default (request)=>{
    return {path:request.path}
}

export default (request)=>{
    return {path:request.path}
}

export default (request)=>{
    return {name:"app layout"}
}

export default (request)=>{
    return {path:request.path}
}
  • The directory structure should be like this
my-nodestack-app
├── src
│   ├── pages
│   │   │── get_data                    
│   │   │   │── index.js   
│   │   │   │── about.js   
│   │   │   │── layout.js  
│   │   │   │── app   
│   │   │   │   │── index.js 
│   │   │   │   │── layout.js  
│   ├── routes
│   │   │── get_data                    
│   │   │   │── index.js   
│   │   │   │── about.js   
│   │   │   │── layout.js  
│   │   │   │── app   
│   │   │   │   │── index.js 
│   │   │   │   │── layout.js   
├── ndsk.config.js
└── package.json
  • We use request in the routing configuration file to get the current request path and pass it to the front-end page props.
  • How to get the front-end request parameters, headers, cookies information, etc. You can view the request document here
  • Visit http://localhost:3000/get_data

What is the difference with nextjs?

  • nextjs is good at mixing server-side business logic with front-end pages, while this framework separates business logic from pages and passes them to props by default, which makes maintenance easier.

Dynamically modify the title according to the URL

  • Modify the routes/get_data/layout.js file as follows:
export default (request)=>{
    let title = "get data"
    let desciption = 'default descript'
    let keywords = 'default keywords'
    let author = 'default author'
    if(request.path === '/get_data/app'){
        title = "app title";
        desciption = "app descript"
        keywords = 'app keywords'
        author = 'app author'
    }
    return {title,desciption,keywords,author}
}
  • Modify the pages/get_data/layout.js file as follows:
export default (props)=>{  
    return (
      <html lang="en">
        <head>
          <title>{props.title}</title>
           <meta name="description" content={props.description}/>
           <meta name="keywords" content={props.keywords}/>
           <meta name="author" content={props.author}/> 
        </head> 
        <body> 
        <div>
            <div><a href='/get_data/index'>index</a></div>
            <div><a href='/get_data/about'>about</a></div>
            <div><a href='/get_data/app'>app</a></div>
        </div>
        <div>{props.children}</div>
        </body>
      </html>
    );
}

Next

Dynamic loading