More than 5 years have passed since last update.

エンジニアスタンプラリー～フロントエンド編＃13

Last updated at 2019-10-30Posted at 2019-10-22

企画主旨

Frontend Developer Roadmapをひたすら巡回する企画
詳しくはこちら

今回の実施内容

SSR(Server Side Rendering)

Server Side Rendering

Next.js (React.js)

Getting Started | Next.jsを参考に、今までのReactアプリをSSRに無理やりコンバート。
作業としてはエントリーポイントだったindex.tsを./pages/index.tsxに移動して修正。

index.tsx

import React from 'react';
import { Provider } from 'mobx-react';
import Head from 'next/head'

import App from '../src/js/App';
import SkillStore from '../src/js/stores/SkillStore';
import "../src/sass/main.scss"

const store = new SkillStore();

export default () =>(
  <React.Fragment>
    <Head>
      <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0" />
      <meta name="description" content="The Stamp Rally of FDR" />
      <meta name="theme-color" content="#ffffd9" />
      <title>Frontend Developer Roadmap スタンプラリー</title>
      <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
      <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet" />
    </Head>

    <Provider store={store}>
      <App />
    </Provider>

    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  </React.Fragment>
);

成果物

意味があるとかないとかじゃない。使ってみることが目的。
Githubページに上げられない。。。
https://github.com/tonchan1216/WDR-frontend/tree/v13

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up