首先要理解next.js或者nuxt.js使用场景下所谓的服务端渲染的含义以及想要解决的问题。

假设以下场景，题主自己写了一篇技术分享文章放在自己的服务器上。

在访问这个页面的时候，浏览器从服务器拿到的HTML是这样的：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>分享</title>
</head>
<body>
  <div>
    <div id="title"></div>
    <div id="content"></div>
  </div>
  <script>
    var titleEle = document.getElementById('title');
    var contentEle = document.getElementById('content');

    titleEle.innerText = '我是分享标题';
    contentEle.innerHTML = [
      '<p>',
        '我是分享内容。',
      '</p>',
    ].join('');
  </script>
</body>
</html>

看似没什么问题吧，浏览器也能正常解析，内容也能正常显示。

但是爬虫(以下爬虫都指搜索引擎爬虫)碰到这个页面就不是这么友好了，在爬虫眼里可能就完全忽视了script标签里的内容。

也许爬虫很智能，会把简单脚本执行一遍后再看整个文档的内容再做分析，但如果文章内容是异步请求的，那没有特殊情况，爬虫是绝对不会等你请求完文章等一系列操作后再分析页面结构。

因为爬虫压根不知道页面什么时候渲染好，即便是window.onload也只是说明资源都加载完毕了而已。

以上其实是一个简单的背景，现在的vue、react等前端框架也是因为上述与其他一些原因才需要SSR(服务端渲染)。

无论是使用带compiler的vue版本直接在浏览器里运行，还是利用vue-loader将模版全部编译成render函数，都存在这个问题。

题主可以用vue-cli建一个简单的项目，随便写几个组件展示在页面上，然后编译结果。

编译完可以观察结果的html文件，会发现这个html除了放vue根组件的挂载元素(通常是id为app的一个div)，剩下的就是引入资源，当然如果你修改过模版html，那修改的内容也会带过来。

那样结果就很明显了，写的那几个组件，都是通过js渲染到页面上的。

假如说和上述情形一样，题主写的是一个技术分享文章，文章内容通过异步请求获取，那不通过其他手段，搜索引擎爬八十年可能都不会收录这篇文章，因为对爬虫而言，这个 html是空的，没有有用的信息。

背景基本理清楚了，回归题主的问题。

node.js不就是服务端渲染吗？

现在常说的服务端渲染，是由服务端提供首屏内容的html，这样对搜索引擎更友好，首屏渲染也更快。

因为浏览器拿到后可以直接解析首屏的html，而不用等js资源加载完后再做一系列的动作。

扯远了，猜测题主理解的服务端渲染应该是由服务端输出了html，那就是服务端渲染。

next.js和nuxt.js的运用是什么呢？

我觉得他们官方文档解释的可能比我说的会清楚一些。

Next.js: Next.js 是一个轻量级的 React 服务端渲染应用框架。

Nuxt.js: Nuxt.js 预设了利用 Vue.js 开发服务端渲染的应用所需要的各种配置。

他们都是一个框架，预先帮你做好了服务端渲染需要做的事情。

使用这两个框架开发后编译出的内容，通过node.js运行，访问的时候会将首屏的html内容在服务端生成后再返回。

它们的区别是什么？

区别已经很清楚了，一个是给React开发者用的，一个是给Vue开发者用的，或者说是针对各自框架产生的。

服务端每次是重新发送html页面去客户端吗？

这个可以脱离开框架来讲，通常不做ssr，大多数情况下这些前端资源都会作为静态资源存在，直接丢到cdn。

但是如果要做ssr，那每次访问都是由服务端来生成html了，所以没有缓存等辅助机制，那服务端每次都要重新生成html后发送给客户端。

html的数据会不会大量重复，不用服务端渲染，客户端来渲染一个或者其他组件的时间会快一些呢

这个得看具体场景了，通过上面这些问题，这个问题题主自己应该可以理解了，大部分情况下我们是不需要做服务端渲染的。部分场景还可以使用预渲染，这个题主可以去了解一下。

 

java开发实习工程师http://www.gtalent.cn/exam/interview/jdAgwJtErNal1znK
JavaScript大厂算法题(快手/拼多多/喜马拉雅fm)：http://www.gtalent.cn/exam/interview/PJ68xt5fleuNRC9a
c++大厂算法题(字节跳动/网易/百度/快手)：http://www.gtalent.cn/exam/interview/dlK2B8TxsYq6cEM9
web前端工程师（电商）：http://www.gtalent.cn/exam/interview/1rWl4RimyZYpg6t9