From 79f7688703fe42ce87c92567f5bc92b6691eaa20 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Mon, 14 Feb 2022 16:56:29 +0100
Subject: chore: load recent posts on homepage during build

This way, even whithout JS, user can see the latest posts.
---
 src/components/Widgets/RecentPosts/RecentPosts.tsx | 21 +++++++--------------
 1 file changed, 7 insertions(+), 14 deletions(-)

(limited to 'src/components/Widgets/RecentPosts/RecentPosts.tsx')

diff --git a/src/components/Widgets/RecentPosts/RecentPosts.tsx b/src/components/Widgets/RecentPosts/RecentPosts.tsx
index b7957b7..1a58574 100644
--- a/src/components/Widgets/RecentPosts/RecentPosts.tsx
+++ b/src/components/Widgets/RecentPosts/RecentPosts.tsx
@@ -1,6 +1,7 @@
 import Spinner from '@components/Spinner/Spinner';
 import { getPublishedPosts } from '@services/graphql/queries';
 import { ArticlePreview } from '@ts/types/articles';
+import { PostsList } from '@ts/types/blog';
 import { settings } from '@utils/config';
 import { getFormattedDate } from '@utils/helpers/format';
 import Image from 'next/image';
@@ -10,10 +11,12 @@ import { useIntl } from 'react-intl';
 import useSWR from 'swr';
 import styles from './RecentPosts.module.scss';
 
-const RecentPosts = () => {
+const RecentPosts = ({ posts }: { posts: PostsList }) => {
   const intl = useIntl();
-  const { data, error } = useSWR('/recent-posts', () =>
-    getPublishedPosts({ first: 3 })
+  const { data, error } = useSWR<PostsList>(
+    '/recent-posts',
+    () => getPublishedPosts({ first: 3 }),
+    { fallbackData: posts }
   );
   const router = useRouter();
   const locale = router.locale ? router.locale : settings.locales.defaultLocale;
@@ -67,17 +70,7 @@ const RecentPosts = () => {
     return data.posts.map((post) => getPost(post));
   };
 
-  return (
-    <ul className={styles.list}>
-      <noscript>
-        {intl.formatMessage({
-          defaultMessage: 'Javascript is required to load the latest posts.',
-          description: 'RecentPosts: noscript tag',
-        })}
-      </noscript>
-      {getPostsItems()}
-    </ul>
-  );
+  return <ul className={styles.list}>{getPostsItems()}</ul>;
 };
 
 export default RecentPosts;
-- 
cgit v1.2.3