Implement SSR Cache

Author: velopert

docker/redis/docker-compose.yml

@@ -0,0 +1,17 @@
+version: '2'
+
+services:
+  redis:
+    image: 'bitnami/redis:5.0'
+    environment:
+      # ALLOW_EMPTY_PASSWORD is recommended only for development.
+      - ALLOW_EMPTY_PASSWORD=yes
+      - REDIS_DISABLE_COMMANDS=FLUSHDB,FLUSHALL
+    ports:
+      - '6379:6379'
+    volumes:
+      - 'redis_data:/bitnami/redis/data'
+
+volumes:
+  redis_data:
+    driver: local

package.json

@@ -18,6 +18,7 @@
     "@testing-library/user-event": "^7.1.2",
     "@types/codemirror": "^0.0.81",
     "@types/date-fns": "^2.6.0",
+    "@types/ioredis": "^4.14.3",
     "@types/jest": "^24.0.0",
     "@types/koa": "^2.11.0",
     "@types/koa-bodyparser": "^4.3.0",
@@ -27,6 +28,7 @@
     "@types/loadable__server": "^5.9.1",
     "@types/node": "^12.0.0",
     "@types/node-fetch": "^2.5.4",
+    "@types/path-to-regexp": "^1.7.0",
     "@types/qs": "^6.9.0",
     "@types/ramda": "^0.26.38",
     "@types/react": "^16.9.0",
@@ -69,6 +71,7 @@
     "html-webpack-plugin": "4.0.0-beta.5",
     "identity-obj-proxy": "3.0.0",
     "immer": "^5.0.1",
+    "ioredis": "^4.14.1",
     "jest": "24.9.0",
     "jest-environment-jsdom-fourteen": "0.1.0",
     "jest-resolve": "24.9.0",
@@ -80,6 +83,7 @@
     "mini-css-extract-plugin": "0.8.0",
     "node-fetch": "^2.6.0",
     "optimize-css-assets-webpack-plugin": "5.0.3",
+    "path-to-regexp": "^6.1.0",
     "pnp-webpack-plugin": "1.5.0",
     "postcss-flexbugs-fixes": "4.1.0",
     "postcss-loader": "3.0.0",

src/App.tsx

@@ -25,7 +25,7 @@ const EmailLoginPage = loadable(
   () => import('./pages/EmailLoginPage'),
   loadableConfig,
 );
-const WritePage = loadable(() => import('./pages/WritePage'), loadableConfig);
+const WritePage = loadable(() => import('./pages/WritePage'));
 const SearchPage = loadable(() => import('./pages/SearchPage'), loadableConfig);
 const SavesPage = loadable(() => import('./pages/SavesPage'), loadableConfig);
 const TagsPage = loadable(

src/components/common/MarkdownEditor.tsx

@@ -91,7 +91,7 @@ const MarkdownEditor = ({
 
   return (
     <MarkdownEditorBlock style={style} className={className}>
-      <textarea ref={textArea} style={{ border: 'none' }} />
+      <textarea ref={textArea} style={{ border: 'none', display: 'none' }} />
     </MarkdownEditorBlock>
   );
 };

src/components/write/TitleTextarea.tsx

@@ -1,8 +1,8 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import TextareaAutosize from 'react-textarea-autosize';
 import palette from '../../lib/styles/palette';
 
-const TitleTextarea = styled(TextareaAutosize)`
+const style = css`
   display: block;
   padding: 0;
   font-size: 2.75rem;
@@ -18,4 +18,12 @@ const TitleTextarea = styled(TextareaAutosize)`
   }
 `;
 
+export const TitleTextareaForSSR = styled.textarea`
+  ${style}
+`;
+
+const TitleTextarea = styled(TextareaAutosize)`
+  ${style}
+`;
+
 export default TitleTextarea;