理由
ssrを学ぶのは、やはり技術を深めないと淘汰されるからです。そのメリットは誰もが理解していると思うので、それについては触れません。私にとっては、実はあまり意味がないんです。ロードが速いと言いますよね。今、スパプロジェクトのコードは、分割された後、実際には非常に速くなることができますが、この種のものは確かに速いです。それならseoにはいいんじゃないですか？今、ビッグクローラーは温泉情報をクロールできる技術だと言われていますが、具体的な詳細は不明ですが、これが最大のメリットと考えるべきでしょう。しかし、合理的な存在、学習はできません。
nuxtjs
まず第一に、vueのエコシステムは素晴らしいです。vue-cliは良いです、nuxtjsは良いです、足場の非常に完全なセットがあり、ユーザーは開発システムの独自のアイデアを構築するために足場を使用することができます。今回はnextjsについてです。
nextjsの初見
nextjsの公式サイトを開くと、ただただ言葉を失います。なんじゃこりゃ？長沙ではreactよりもvueの方がよく使われています。こんなひどいドキュメントでどうやって学べと？というわけで、一日の大半を使い慣れたnextjsのフレームワークを自作することに費やしました。Nextjs+ts+antd+dvaです。
nextjs + ts
nextjsはtsコンフィギュレーションも提供し、nextjsの新しいバージョンはtsモジュールをインストールするだけです。nextjsの新しいバージョンは、tsモジュールをインストールするだけです。
npm i --save next react react-dom @zeit/next-typescript typescript @types/react @types/node
構わないので、インストールしたらすぐに
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
},
そして、新しいページフォルダの一番外側のディレクトリに、自分のtsの新しい定義を作成し、それに反応するように書き込みます。nextjsのルールについてはしばらく割愛し、今回はこのフレームワークの構築過程についてお話します。
antd
antdはやはりとても良いです。しかし、公式の設定やウェブで検索した設定によると、オンデマンドロードの設定はできないようです。ルートコンポーネントを書き直さなければなりません。
// ./pages/_app.ts
import "antd/dist/antd.css";
import React from "react";
export default ({ Component, pageProps }) => <Component {...pageProps} />;
antdからすべてのスタイルを持ってくることが、それを動作させる唯一の方法です。もしかしたら、私はまだ正しい方法を見つけていないかもしれません。
dva
reduxではなくdvaなのは、reduxを触ったことがないので、それしか知らないからです。
npm install --save dva-no-router
その後、github.com/b...でStoreファイルを自分で作成し、tsへの変換に注意してください。 それから、dvaを使用するためには、各ページに以下のいずれかが必要であることに気づきました。
import WithDva from '../utils/store';
....
static async getInitialProps(props) {}
....
export default WithDva((state) => { return { index: state.index }; })(Page);
nextjsを使ったことがある人なら誰でも知っているはずです。そこで、多くのコードを書かなくて済むように、それらを統合する方法を考えました。こんな感じです。
import WithDva from './store'
export const WithComponent = (Components: {
(props: any): JSX.Element;
getInitialProps?: (props: any) => Promise<{
[key: string]: any;
pathname: string;
query: { [key: string]: any };
isServer: boolean;
dvaStore: { [key: string]: any };
}>
}, initData?: (props?: Initialprops) => Promise<{ [key: string]: any }> | { [key: string]: any }) => {
Components.getInitialProps = async (props: Initialprops) => {
const {
pathname, query, isServer, store,
} = props;
let result: { [key: string]: any } = {};
// 拡張初期化データ
if (initData) {
result = await initData(props);
}
return {
pathname, query, isServer, dvaStore: store, ...result
};
};
return WithDva((state) => state)(Components)
}
第一引数はreactコンポーネントで、第二引数はgetInitialPropsに書くべき内容です。 コンポーネントでは以下のように使います：
export default WithComponent(
Home,
(props) =>
new Promise((res) => {
setTimeout(async () => {
// 事前にグローバルレンダリングする
// await props.store.dispatch({ type: 'index/init' })
res({ a: 67 });
}, 0);
})
);
dvaの残りの設定には触れませんので、普通に使ってください。dvaはまだawait/syncをサポートしていませんが、yieldと*はサポートしています。これはちょっと厄介ですね。
ダイナミック・ルーティング
ダイナミック・ルートにジャンプしたとき、問題が見つかりました。現在のページをリフレッシュするとき、ノード側はリダイレクトしないので、404と表示されます。まず、ルート・ディレクトリに新しいserver.jsを作成し、expressをインストールします。package.jsonのコードを次のように変更します。
"scripts": {
"dev": "node server.js",
"build": "next build",
"start": "NODE_ENV=production node server.js"
},
server.jsのキーコードは以下の通りです：
server.get('/dashboard/:id', (req, res) => {
return app.render(req, res, '/dashboard', { id: req.params.id })
})
server.get('*', (req, res) => {
return handle(req, res)
})
同時にここでは、インターフェイスのリバースプロキシなどを行うことができます... ...この方法は、プロジェクトを始めるのにnextjsよりずっとスケーラブルです。
最後に
見た目はいたってシンプルで、一日の大半を物色と実験に費やしました。これは個人的にお気に入りの組み合わせです。もっと詳しく知りたければ、ここに行ってコードをプルダウンしてください。結局のところ、それはまた、書くことを学ぶ私の段階であり、多くの問題があるに違いない、改善案を提案するお兄さんを歓迎します。
