SSR Guide: Remove app.js (#1297)

* Remove app.js

* Fix typos, code style

Co-authored-by: Natalia Tepluhina <tarya.se@gmail.com>

* Fix typos

* Fix code style

* Fix code style

* Fix code style

* Fix code style

* Fix wrong async function

Co-authored-by: Natalia Tepluhina <tarya.se@gmail.com>

Author: 2 people

src/guide/ssr/routing.md

@@ -8,34 +8,50 @@
 
 ```js
 // router.js
-import { createRouter, createMemoryHistory, createWebHistory } from 'vue-router'
+import { createRouter } from 'vue-router'
 import MyUser from './components/MyUser.vue'
 
-const isServer = typeof window === 'undefined'
-
-const createHistory = isServer ? createMemoryHistory : createWebHistory
-
 const routes = [{ path: '/user', component: MyUser }]
 
-export default function() {
+export default function (history) {
   return createRouter({
-    history: createHistory(),
+    history,
     routes
   })
 }
 ```
 
-そして `app.js` と、クライアントとサーバのエントリを更新します:
+そしてクライアントとサーバのエントリを更新します:
+
+```js
+// entry-client.js
+import { createApp } from 'vue'
+import { createWebHistory } from 'vue-router'
+import createRouter from './router.js'
+import App from './App.vue'
+
+// ...
+
+const app = createApp(App)
+
+const router = createRouter(createWebHistory())
+
+app.use(router)
+
+// ...
+```
 
 ```js
-// app.js
+// entry-server.js
 import { createSSRApp } from 'vue'
+// サーバルータはクライアントルータとは異なる履歴を使います
+import { createMemoryHistory } from 'vue-router'
+import createRouter from './router.js'
 import App from './App.vue'
-import createRouter from './router'
 
-export default function(args) {
-  const app = createSSRApp(App)
-  const router = createRouter()
+export default function () {
+  const app = createSSRApp(Vue)
+  const router = createRouter(createMemoryHistory())
 
   app.use(router)
 
@@ -46,20 +62,6 @@ export default function(args) {
 }
 ```
 
-```js
-// entry-client.js
-const { app, router } = createApp({
-  /*...*/
-})
-```
-
-```js
-// entry-server.js
-const { app, router } = createApp({
-  /*...*/
-})
-```
-
 ## コード分割
 
 コード分割、またはアプリの一部を遅延読み込みすることは、初期レンダリングのためにブラウザがダウンロードしなければならないアセットのサイズを減らすことができ、大きなバンドルを持つアプリケーションの TTI (time-to-interactive) を大幅に改善できます。重要なのは初期画面で「必要なものだけ読み込む」ことです。
@@ -81,11 +83,16 @@ const routes = [
 
 ```js
 // entry-client.js
-import createApp from './app'
+import { createApp } from 'vue'
+import { createWebHistory } from 'vue-router'
+import createRouter from './router.js'
+import App from './App.vue'
 
-const { app, router } = createApp({
-  /* ... */
-})
+const app = createApp(App)
+
+const router = createRouter(createWebHistory())
+
+app.use(router)
 
 router.isReady().then(() => {
   app.mount('#app')

src/guide/ssr/server.md

@@ -2,13 +2,14 @@
 
 [コードの構造](./structure.html) と [webpack の設定](./build-config.html) でも説明したとおり、 Express サーバのコードにもいくつかの変更を必要とします。
 
-- バンドル結果のビルドした `app.js` を使ってアプリケーションを作成する必要があります。ファイルパスは、webpack マニフェストを使って見つけられます:
+- バンドル結果からビルドした `entry-server.js` を使ってアプリケーションを作成する必要があります。ファイルパスは、webpack マニフェストを使って見つけられます:
 
   ```js
   // server.js
   const path = require('path')
   const manifest = require('./dist/server/ssr-manifest.json')
 
+  // 'app.js' という名前は、エントリポイント名に `.js` を接尾へ追加したものです
   const appPath = path.join(__dirname, './dist', 'server', manifest['app.js'])
   const createApp = require(appPath).default
   ```
@@ -78,7 +79,7 @@ server.use(
 )
 
 server.get('*', async (req, res) => {
-  const { app } = await createApp()
+  const { app } = createApp()
 
   const appContent = await renderToString(app)
 

src/guide/ssr/structure.md

@@ -4,11 +4,15 @@
 
 クライアントのみのコードを書くとき、コードは毎回新しいコンテキストで評価されると考えることができます。しかし、 Node.js サーバは長時間実行されるプロセスです。コードがプロセスにはじめて要求されるとき、コードは一度評価されメモリ内にとどまります。つまり、シングルトンのオブジェクトを作成すると、すべての受信リクエストの間で共有されることになり、リクエスト間での状態の汚染リスクがあるということです。
 
-よって、 **リクエストごとに新しいルート Vue インスタンスを作成する** 必要があります。そのためには、リクエストごとに新しいアプリケーションのインスタンスを作成する、繰り返し実行可能なファクトリ関数を書く必要があります:
+よって、 **リクエストごとに新しいルート Vue インスタンスを作成する** 必要があります。そのためには、リクエストごとに新しいアプリケーションのインスタンスを作成する、繰り返し実行可能なファクトリ関数を書く必要があります。したがって、サーバコードは次のようになります:
 
 ```js
-// app.js
+// server.js
 const { createSSRApp } = require('vue')
+const { renderToString } = require('@vue/server-renderer')
+const express = require('express')
+
+const server = express()
 
 function createApp() {
   return createSSRApp({
@@ -20,15 +24,6 @@ function createApp() {
     template: `<div>Current user is: {{ user }}</div>`
   })
 }
-```
-
-そして、サーバコードはこのようになります:
-
-```js
-// server.js
-const { renderToString } = require('@vue/server-renderer')
-const server = require('express')()
-const { createApp } = require('src/app.js')
 
 server.get('*', async (req, res) => {
   const app = createApp()
@@ -49,7 +44,7 @@ server.get('*', async (req, res) => {
 server.listen(8080)
 ```
 
-同じルールが他のインスタンス（ルータやストアなど）にも当てはまります。ルータやストアをモジュールから直接エクスポートしてアプリケーション全体にインポートするのではなく、 `createApp` で新しいインスタンスを作成して、ルート Vue インスタンスから注入する必要があります。
+同じルールが他のインスタンス（ルータやストアなど）にも当てはまります。ルータやストアをモジュールから直接エクスポートしてアプリケーション全体にインポートするのではなく、新しいリクエストがくるたびに `createApp` で新しいインスタンスを作成して、ルートの Vue インスタンスから注入する必要があります。
 
 ## ビルド手順の導入
 
@@ -76,42 +71,43 @@ src
 ├── components
 │   ├── MyUser.vue
 │   └── MyTable.vue
-├── App.vue
-├── app.js # 共通のエントリ
+├── App.vue # アプリケーションのルート
 ├── entry-client.js # ブラウザでのみ実行
 └── entry-server.js # サーバでのみ実行
 ```
 
-### `app.js`
+### `App.vue`
 
-`app.js` は、アプリケーションの共通のエントリです。クライアント専用のアプリケーションでは、このファイルの中で Vue アプリケーションのインスタンスを作成して、 DOM に直接マウントします。しかし SSR では、その責務はクライアント専用のエントリファイルに移されます。代わりに `app.js` でアプリケーションのインスタンスを作成して、エクスポートします:
+お気づきかもしれませんが、`src` フォルダのルートに `App.vue` というファイルがあります。このファイルにはアプリケーションのルートコンポーネントが格納されています。これでアプリケーションコードを安全に `server.js` から `App.vue` ファイルに移動することができます:
 
-```js
-import { createSSRApp } from 'vue'
-import App from './App.vue'
-
-// ルートコンポーネントを作成するためのファクトリ関数をエクスポート
-export default function(args) {
-  const app = createSSRApp(App)
+```vue
+<template>
+  <div>Current user is: {{ user }}</div>
+</template>
 
-  return {
-    app
+<script>
+export default {
+  name: 'App',
+  data() {
+    return {
+      user: 'John Doe'
+    }
   }
 }
+</script>
 ```
 
 ### `entry-client.js`
 
-クライアント用のエントリは、ルートコンポーネントのファクトリを使ってアプリケーションを作成し、 DOM にマウントします:
+クライアント用のエントリは、`App.vue` コンポーネントを使ってアプリケーションを作成し、それを DOM にマウントします:
 
 ```js
-import createApp from './app'
+import { createSSRApp } from 'vue'
+import App from './App.vue'
 
 // クライアント固有の初回起動ロジック
 
-const { app } = createApp({
-  // ここでアプリケーションのファクトリに追加の引数を渡すことが可能
-})
+const app = createSSRApp(App)
 
 // これは App.vue テンプレートのルート要素に `id="app"` が前提
 app.mount('#app')
@@ -122,12 +118,11 @@ app.mount('#app')
 サーバ用のエントリは、レンダリングごとに繰り返し呼び出される関数を default でエクスポートします。いまのところは、アプリケーションのインスタンスを返す以外の機能はありませんが、あとでサーバサイドのルートマッチングやデータのプリフェッチのロジックをここに加えます。
 
 ```js
-import createApp from './app'
+import { createSSRApp } from 'vue'
+import App from './App.vue'
 
-export default function() {
-  const { app } = createApp({
-    /*...*/
-  })
+export default function () {
+  const app = createSSRApp(Vue)
 
   return {
     app