nextjs作为koa中间件的使用

react客户端渲染的缺点:首屏速度慢,对SEO不友好

浏览器请求步骤                                                        客户端跳转

1. 浏览器发起请求 /index                                           1.  点击按钮

2. koa接受请求,并且调用nextjs                                 2. 异步加载组件的js

3. nextjs开始渲染                                                     3. 调用页面的getInitialProps

4. 调用app的getInitialProps                                       4. 数据返回,页面跳转

5. 调用页面的 getInitialProps                                     5. 渲染新页面

6. 渲染出最终的 html

7. 返回给浏览器

^ 表示升级小版本,不会升级大的版本

大版本一般只有大改动,才会更新

小版本一般是修复bug, 次版本是一些细微修改

创建next项目的方式

一. 手动创建

npm init     yarn add  react react-dom  next

"dev": "next"    "start": "next start"   启动正式的服务   "build": "next build"

二. 使用 create-next-app

npm i -g create-next-app

npx  create-next-app   app-project

yarn create   app-project

create-next-app   app-project

在pages里面没有引入 React, 是因为在全局中已经引入了

React.createElement(‘div‘, {} , ‘hello‘)

nextjs 自身带有服务器,但是只处理 ssr渲染

处理HTTP请求,并且根据请求返回响应的内容

无法处理服务器  数据接口   数据库连接  session状态

koa是一个非常流行的轻量nodejs服务端框架,本身不封装什么功能

非常易于扩展,变成范式非常符合js特性

next作为koa的一个中间价

const Koa = require(‘koa‘)
const next = require(‘next‘)
const env = process.env.NODE_ENV !== ‘production‘
const app = next({ env })
const handler = app.getRequestHandler() //

app.prepare().then(()=>{ // 等待页面编译完成
  const server = new Koa()
  server.use(async (ctx,next)=>{
    await handler(ctx.req,ctx.res) // 等待nextjs执行完成
    ctx.respond = false
  })
  server.listen(3000,()=>{
    console.log(‘listen on 3000‘)
  })
})

返回 render2

koa-router是 koa的一个中间件

server.use(router,routes())

ctx.param.id

ctx.res    ctx.req 原生的

ctx.response      ctx.request  封装后的Koa对象

ctx.body = { success: true }    ctx.set(‘content-type‘, ‘application/json‘)

requirepass  密码           配置文件配置项

redis-cli   -p 6379

> auth  12345      就可以正确操作了

> setenx   c   10  1     设置过期时间      del  c 删除

ioredis 连接Redis

nextjs默认不支持 css文件引入    为什么?      建议 css in js

yarn add @zeit/next-css

next.config.js 配置文件

如何分模块加载组件     不包括css文件

_app.js

const withCss = require("@zeit/next-css")

if (require !== ‘undefined‘){
  require.extensions[‘.css‘] = file=>{}
}

module.exports = withCss({})

hoc的使用

export default (Comp) => {
   function hoc({Component, pageProps, ...test}){
    if(pageProps){ // 并不是每个页面都有 pageProps
      pageProps.teid=123456;
    }
    return <Comp Component={Component} pageProps={pageProps} {...test} />
  }
  hoc.getInitialProps = Comp.getInitialProps; // 这一个非常关键
  return hoc;
}

原文地址:https://www.cnblogs.com/escapist/p/11371319.html

时间: 2024-10-31 03:11:07

nextjs作为koa中间件的使用的相关文章

koa中间件分析

转载请注明: TheViper http://www.cnblogs.com/TheViper  另外可以参考http://purplebamboo.github.io/2014/05/24/koa-source-analytics-3/,作者用简单的方式造了一个山寨koa. koa是什么? koa是从2013年11月开始发布,更新的.和express相比,koa太年轻了.但它(用文档上的话说)通过组合不同的 generator,可以免除重复繁琐的回调函数嵌套,并极大地提升常用错误处理效率.Ko

KOA中间件实现原理

1 //基本原理 2 var empty=(function *(){})(); 3 //中间件3 4 var mid2=function *(){ 5 console.log("2:before yield"); 6 yield empty; 7 console.log("2:after yield"); 8 } 9 //中间件2 10 var mid1=function *(){ 11 console.log("1:before yield"

Koa - 中间件

前言 Koa 应用程序是一个包含一组中间件函数的对象,它是按照类似堆栈的方式组织和执行的. 当一个中间件调用 next() 则该函数暂停并将控制传递给定义的下一个中间件.当在下游没有更多的中间件执行后,堆栈将展开并且每个中间件恢复执行其上游行为. 以上两句话,是我在官方文档中找到其对 Koa 中间件的描述. 在Koa中,中间件是一个很有意思的设计,它处于request和response中间,被用来实现某种功能.像上篇文章所使用的 koa-router .koa-bodyparser 等都是中间件

Koa中间件(middleware)级联原理

前言 上次看到了koa-compose的代码,今天来说一下koa中间件的级联以及工作原理. 中间件工作原理 初始化koa实例后,我们会用use方法来加载中间件(middleware),会有一个数组来存储中间件,use调用顺序会决定中间件的执行顺序. 每个中间件都是一个函数(不是函数将报错),接收两个参数,第一个是ctx上下文对象,另一个是next函数(由koa-compose定义) 在建立好http服务器后,会调用koa-compose模块对middleware中间件数组进行处理.具体代码这里就

koa中间件实现分析

最近团队内部做了一个web app,用koa做服务端,一直对他中间件实现很感兴趣,对他的源码研究之后,写了一份简化版本的中间件实现.代码除了用到ES6的Generator和Promise,没有用到其他三方库,总共不到一百行,希望能帮助大家理解! 'use strict'; var middleware = []; //向数据库请求数据 var getDataPromise = new Promise(function(resolve,reject){ setTimeout(function(){

傻瓜式解读koa中间件处理模块koa-compose

最近需要单独使用到koa-compose这个模块,虽然使用koa的时候大致知道中间件的执行流程,但是没仔细研究过源码用起来还是不放心(主要是这个模块代码少,多的话也没兴趣去研究了). koa-compose看起来代码少,但是确实绕.闭包,递归,Promise...看了一遍脑子里绕不清楚.看了网上几篇解读文章,都是针对单行代码做解释,还是绕不清楚.最后只好采取一种傻瓜的方式: koa-compose去掉一些注释,类型校验后,源码如下: function compose (middleware) {

koa2入门--03.koa中间件以及中间件执行流程

//中间件:先访问app的中间件的执行顺序类似嵌套函数,由外到内,再由内到外 //应用级中间件 const koa = require('koa'); var router = require('koa-router')(); var app = new koa(); //匹配任意路由之前打印日期 app.use(async (ctx,next)=>{ console.log(new Date()); await next(); }); router.get('/',async (ctx)=>

koa 中间件 koa-art-template 的使用

例子 const Koa = require('koa'); const render =require('koa-art-template'); const path= require('path'); //创建服务器 const app=new Koa(); //渲染 render(app, { root: path.join(__dirname, 'view'), extname: '.html', debug: process.env.NODE_ENV !== 'production'

koa中间件

function pv(ctx){ global.console.log(ctx.path); } module.exports=function(){ return async function(ctx,next){ pv(ctx); await next(); //next是继续执行下面的中间件,如果不写会直接跳出,不会继续执行 } } //app.js const pv = require('./middleware/koa-pv'); app.use(pv()) 原文地址:https:/