Show 404 on SSR

Author: velopert

config/webpack.config.serverless.js

@@ -20,9 +20,7 @@ const imageInlineSizeLimit = parseInt(
   process.env.IMAGE_INLINE_SIZE_LIMIT || '10000',
 );
 
-console.log(process.env.PUBLIC_URL);
 const publicUrl = (paths.servedPath || process.env.PUBLIC_URL).slice(0, -1);
-console.log({ publicUrl });
 const env = getClientEnvironment(publicUrl);
 
 module.exports = {

src/containers/post/PostViewer.tsx

@@ -23,7 +23,7 @@ import gql from 'graphql-tag';
 import { shareFacebook, shareTwitter, copyText } from '../../lib/share';
 import PostToc from '../../components/post/PostToc';
 import LinkedPostList from '../../components/post/LinkedPostList';
-import { getScrollTop } from '../../lib/utils';
+import { getScrollTop, ssrEnabled } from '../../lib/utils';
 import UserProfile from '../../components/common/UserProfile';
 import VelogResponsive from '../../components/velog/VelogResponsive';
 import styled from 'styled-components';
@@ -106,6 +106,10 @@ const PostViewer: React.FC<PostViewerProps> = ({
     });
   }, [data, postView, showNotFound]);
 
+  if (ssrEnabled && data && data.post === null) {
+    showNotFound();
+  }
+
   const prefetchLinkedPosts = useCallback(() => {
     if (!data || !data.post) return;
     if (prefetched.current) return;

src/containers/tags/TagDetailContainer.tsx

@@ -3,7 +3,7 @@ import TagDetail, { TagDetailSkeleton } from '../../components/tags/TagDetail';
 import { useQuery } from '@apollo/react-hooks';
 import { GET_TAG, GetTagResponse } from '../../lib/graphql/tags';
 import { GET_POST_LIST, PartialPost } from '../../lib/graphql/post';
-import { safe } from '../../lib/utils';
+import { safe, ssrEnabled } from '../../lib/utils';
 import useScrollPagination from '../../lib/hooks/useScrollPagination';
 import PostCardList, {
   PostCardListSkeleton,
@@ -35,6 +35,10 @@ function TagDetailContainer({ tag }: TagDetailContainerProps) {
     }
   }, [showNotFound, tagDetail.data]);
 
+  if (ssrEnabled && tagDetail.data && !tagDetail.data.tag) {
+    showNotFound();
+  }
+
   const onLoadMore = useCallback(
     (cursor: string) => {
       getPostList.fetchMore({

src/containers/velog/SeriesPosts.tsx

@@ -18,6 +18,7 @@ import SeriesActionButtons from '../../components/velog/SeriesActionButtons';
 import DraggableSeriesPostList from '../../components/velog/DraggableSeriesPostList';
 import useUser from '../../lib/hooks/useUser';
 import useNotFound from '../../lib/hooks/useNotFound';
+import { ssrEnabled } from '../../lib/utils';
 
 export interface SeriesPostsProps {
   username: string;
@@ -63,6 +64,10 @@ const SeriesPosts: React.FC<SeriesPostsProps> = ({ username, urlSlug }) => {
     setOrder(data.series.series_posts.map(sp => sp.id));
   }, [data, showNotFound]);
 
+  if (ssrEnabled && data && !data.series) {
+    showNotFound();
+  }
+
   const onChangeNextName = useCallback(
     (e: React.FormEvent<HTMLHeadingElement>) => {
       setNextName(e.currentTarget.innerText);

src/containers/velog/hooks/useApplyVelogConfig.ts

@@ -61,4 +61,8 @@ export default function useApplyVelogConfig(username: string) {
       }),
     );
   }
+
+  if (ssrEnabled && data && data.velog_config === null) {
+    showNotFound();
+  }
 }

src/server/sampleRender.tsx

@@ -57,7 +57,9 @@ const serverRender = async ({ url, loggedIn, cookie }: SSROption) => {
     cache: new InMemoryCache(),
   });
 
-  const context = {};
+  const context = {
+    statusCode: 200,
+  };
   const sheet = new ServerStyleSheet();
   const extractor = new ChunkExtractor({
     statsFile,
@@ -108,7 +110,7 @@ const serverRender = async ({ url, loggedIn, cookie }: SSROption) => {
     }
   });
 
-  return pageHtml;
+  return { html: pageHtml, statusCode: context.statusCode };
 };
 
 export default serverRender;

src/server/serverRender.tsx

@@ -3,17 +3,18 @@ import serverRender from './serverRender';
 
 const ssrMiddleware: Middleware = async (ctx, next) => {
   try {
-    const html = await serverRender({
+    const result = await serverRender({
       url: ctx.url,
       cookie: ctx.headers.cookie,
       loggedIn: !!(
         ctx.cookies.get('refresh_token') || ctx.cookies.get('access_token')
       ),
     });
-    if (!html) {
+    if (!result) {
       return next();
     }
-    ctx.body = html;
+    ctx.body = result.html;
+    ctx.status = result.statusCode;
   } catch (e) {
     ctx.throw(500, e);
   }

src/server/ssrMiddleware.ts

@@ -12,13 +12,17 @@ export const handler = async (event: APIGatewayEvent) => {
     cookie.includes('refresh_token') || cookie.includes('access_token');
 
   try {
-    const html = await serverRender({
+    const result = await serverRender({
       url,
       cookie,
       loggedIn,
     });
+    if (!result) throw new Error('Result is null');
+
+    const { html, statusCode } = result;
+
     return {
-      statusCode: 200,
+      statusCode: statusCode,
       headers: {
         'content-type': 'text/html; charset=utf-8;',
       },