支持 SSR 应用在指定的 Route 上

liamwang commented 7 years ago

针对部分 Route 应用 SSR 好处：

减轻服务器压力。对于 User-specific 的网页可以不需要SSR，比如类似”个人中心“的页面。尤其对于PC端网站，除了为SEO应用SSR，其它场景都可以把渲染的工作放到Client-Side。
很多第三方插件不支持SSR，一个解决方案是将引用这些插件的页面禁用SSR，比如 Quill 富文本编辑器（纯编辑功能的页面完全不需要SSR）。

希望 SSR 模板支持这个特性，谢谢！

PengXing commented 7 years ago

我写的比较多，请耐心读完。。

这一点是可以指定的，在 lavas 提供的服务器端渲染的模板中有一个 server.js，这里面使用了 express，除指定路径的其他 URL 都会进入到 vue 的 SSR 中，不特定页面想走 SSR，那么我们把这部分的 URL 转到 index.html 上，SSR 模板没有提供这个文件，可以从 App Shell 模板中拷贝出来，当然只拷贝这个 index.html 是不够的，相关文件都需要拷贝进来，src/entry-client.js 和 webpack 的编译文件。另外补充一下，百度的爬虫是可以抓取通过 JS 渲染的页面内容的。
这个问题，其实我们在模板中已经做了这个事情，如果你留意到了的话，SSR 模板中使用了 iscroll，iscroll 并不支持服务器端渲染，因此我们在 src 目录中新增了一个 iscroll-ssr.js 文件，只是添加这个文件当然还不够，通过在 webpack.server.conf.js 中配置 alias，将服务器端渲染使用的 iscroll 映射到空的，只是这样还不够，需要将 iscroll 添加到 nodeExternals 的白名单中，否则不打包进 vue-ssr-server-bundle.json 文件中还是会引用 node_modules 目录中的 iscroll，导致 alias 失效，最后在使用 iscroll 的地方判断一下当前是不是在服务器环境下。

我先把 ISSUE 关掉了，如果觉得问题没有解决，可以再 OPEN

liamwang commented 7 years ago

@PengXing 没错，你说的方法都可以解决我所提到的问题。你说的方法1、2我都在用。我的意思是把“指定路由应用SSR”这个特性集成到模板中去，这样每次用 cli 创建新项目就不用再重复去折腾了，即将这个特性进行通用处理。

类似这样： router/index.js

export const routes = [
  { path: '/', name: 'home', component: createView('Home'), ssrEnabled: true },
  { path: '/new-post', name: 'new-post', component: createView('NewPost') }
]

export const createRouter = ()=> new Router({
  routes
})

server.js 可能类似这样

import { routes } from './src/router'

app.use(function (req, res, next) {
  const route = /* 找到 req.url 对应的 route */
  if (!route.ssrEntabled) {
    res.render('index.spa.html')
    return
  }
  next()
})

PengXing commented 7 years ago

OK，我明白你的意思了，我们会讨论一下。

PengXing commented 7 years ago

@liamwang 这个问题我们讨论了一下，决定还是不在 SSR 模板中默认提供 SPA 的功能，不过我们会在文档中对这个问题加以引导

PengXing commented 7 years ago

有些页面不想走 SSR 怎么办这里我写了一片文档来介绍了一下解决方案，可以参考一下，这里我就把 ISSUE 关掉了

lavas-project / lavas

支持 SSR 应用在指定的 Route 上 #6