Next.js实现react服务器端渲染的方法示例

yarn add next react react-dom

 "scripts": {
  "dev": "next",
  "build": "next build",
  "start": "next start"
 },

export default () => 
this is index page 
;

  import Head from 'next/head'; // 引入内置组件

  export default () => (
    

     
       
       
     
     
this is index page
    
  );

  import Link from 'next/link';

  export default () => (
    

     
this is home index page
     
        to about page
     
    
  );

import React, {Component} from 'react';
import Link from 'next/link';

export default class About extends Component {
  constructor(props) {
   super(props);
  }
  render() {
   // href 值可以是一个对象
   const href = {
     pathname: '/home',
     query: {name: 'test'}
   };

   return (
    

      
this is about page 
      
      {/* replace 覆盖历史跳转 */}
      
      click to home index page
      
    
 
   );
  }
}

  import router from 'next/router';
  /*
    router.pathname ==> /home
    router.query ==> {}
    router.route - 当前路由
    asPath - 显示在浏览器地址栏的实际的路由
    push(url, as=url) - 跳转页面的方法
    replace(url, as=url) - 跳转页面
  */

import Link from 'next/link';
import {withRouter} from 'next/router';

const Home = (props) => {
  // 这里的 props 会得到 {router, url} 两个属性
  // router: {push: &＃402;, replace: &＃402;, reload: &＃402;, back: &＃402;, prefetch: &＃402;, …}
  // url: {query: {…}, pathname: "/home", asPath: "/home&＃63;name=test", back: &＃402;, push: &＃402;, …}
  console.log(props);
  return (
   

     
this is home index page 
     {/* 
       to about page
      */}
   
  );
}

export default withRouter(Home);

sudo yarn add next-redux-wrapper redux react-redux redux-devtools-extension redux-thunk

  import { createStore, applyMiddleware } from 'redux';
  import { composeWithDevTools } from 'redux-devtools-extension'; 
  import thunk from 'redux-thunk';
  import reducer from '../modules/reducers';

  const middleware = [thunk];
  const initializeStore = initialState => {
    return createStore(
       reducer, 
       initialState, 
       composeWithDevTools(applyMiddleware(...middleware))
     );
  };

  export default initializeStore;

  // /modules/reducers.js
  import { combineReducers } from 'redux';
  import about from './about/reducer';

  // 合并到主reducer
  const reducers = {
    about
  };

  // combineReducers() 函数用于将分离的 reducer 合并为一个 reducer 
  export default combineReducers(reducers);

  // /modules/about/reudcer.js 
  // /about 页面的 reducer
  import {
    CHANGE_COUNT
  } from '../types-constant';

  const initialState = {
    count: 0
  };

  const typesCommands = {
    [CHANGE_COUNT](state, action) {
     return Object.assign({}, state, { count: action.msg });
    },
  }

  export default function home(state = initialState, action) {
    const actiOnResponse= typesCommands[action.type];

    return actionResponse &＃63; actionResponse(state, action) : state;
  }

  // /modules/about/actions.js
  // /about 页面的 action
  import {
    CHANGE_COUNT
  } from '../types-constant';

  export function changeCount(newCount) {
    return {
     type: CHANGE_COUNT,
     msg: newCount
    };
  }

  import React, { Component } from 'react';
  import withRedux from 'next-redux-wrapper';
  import { connect } from 'react-redux';
  import { bindActionCreators } from 'redux';
  import AboutCom from '../components/About/index';
  import initializeStore from '../store/initializeStore';
  import { changeCount } from '../modules/about/actions';

  class About extends Component {
    constructor(props) {
     super(props);
    }
    render() {
     const { about: { count }, changeCount } = this.props;
     return ;
    }
  }

  const cOnnectedPage= connect(
    state => ({ about: state.about }),
    dispatch => ({
     changeCount: bindActionCreators(changeCount, dispatch)
    })
  )(About);

  export default withRedux(initializeStore)(connectedPage);