https://github.com/revskill10/ssr-boilerplate

Simple SSR boilerplate that just works.
https://github.com/revskill10/ssr-boilerplate

nextjs react react-router

Last synced: 13 days ago
JSON representation

Simple SSR boilerplate that just works.

• Host: GitHub
• URL: https://github.com/revskill10/ssr-boilerplate
• Owner: revskill10
• Created: 2018-12-10T21:07:44.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2023-12-15T09:00:33.000Z (11 months ago)
• Last Synced: 2024-10-12T19:09:01.851Z (27 days ago)
• Topics: nextjs, react, react-router
• Language: JavaScript
• Size: 66.4 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# ssr-boilerplate

Simple SSR boilerplate that just works.

## Usage

```js

npm run dev

npm start

```

## Features

- Server side rendering

- Hot module replacement

- React Router

- React Helmet

- Dynamic component with `@loadable/component`

## Define your routes

```js

import Index from './components/index'

import List from './components/list'

import {getText} from './api'

const routes = [

  {

    path: '/',

    exact: true,

    component: Index,

  },

  {

    path: '/list',

    component: List,

    getInitialProps: async (context) => {

      context.text = await getText();

    }

  }

]

export default routes;

```

One addition is the `getInitialProps`, it's the async function that will run on server to inject remote data for your component.

## Define your component.

Note: All React components must reside inside `components` folder.

```js

import React from "react";

import Nav from './nav'

import {getText} from '../api'

export default class List extends React.Component {

  async componentDidMount() {

    const {text} = this.props

    if (!text) {

      const tmp = await getText()

      this.setState({

        text: tmp

      })

    }

  }

  constructor(props) {

    super(props)

    this.state = {

      text: props.text

    }

  }

  render() {

    const {text} = this.state

    return (

      


        

        {text && text.login}

      

    )

  }

}


```

`nav.js`

```js

import React from 'react'

import { Link } from 'react-router-dom'

const Nav = () => {

  return (

    


      
Home

      
List

    

  )

}


export default Nav

```