SSR + Caching Fix for Next.js

.all-contributorsrc

@@ -63,4 +63,4 @@
     }
   ],
   "contributorsPerLine": 7
-}
+}

src/ChunkCollection.jsx

@@ -1,7 +1,8 @@
 // @ts-check
 import React, { useEffect, useState, useContext } from "react";
 import { ChunkCollectionContext } from "./ChunkCollectionContext";
-import { api, getCachedData, storeCache, computeClassName } from "./utilities";
+import { getCachedData, storeCache, computeClassName } from "./utilities";
+import axios from "axios";
 import { EditmodeContext } from "./EditmodeContext";
 
 export function ChunkCollection({
@@ -20,6 +21,15 @@ export function ChunkCollection({
 
   useEffect(() => {
     // Get data from localStorage
+    const api = axios.create({
+      baseURL: "https://api2.editmode.com/",
+      headers: {
+        Accept: "application/json",
+      },
+      params: {
+        referrer: window.location.href,
+      },
+    });
     const cachedChunk = getCachedData(cacheId);
     if (cachedChunk) {
       const data = JSON.parse(cachedChunk);
@@ -29,7 +39,7 @@ export function ChunkCollection({
     const urlParams = new URLSearchParams({
       limit,
       collection_identifier: identifier || contentKey,
-      project_id: projectId
+      project_id: projectId,
     });
 
     tags.forEach((tag) => urlParams.append("tags[]", tag));
@@ -62,7 +72,14 @@ export function ChunkCollection({
     >
       {chunks.map((chunk) => (
         <ChunkCollectionContext.Provider key={chunk.identifier} value={chunk}>
-          <div className={computeClassName(itemClass, "chunks-collection-item--wrapper")}>{children}</div>
+          <div
+            className={computeClassName(
+              itemClass,
+              "chunks-collection-item--wrapper"
+            )}
+          >
+            {children}
+          </div>
         </ChunkCollectionContext.Provider>
       ))}
       {chunks.length && (

src/useChunk.js

@@ -1,9 +1,9 @@
 // @ts-check
 import { useContext, useEffect, useState, useMemo } from "react";
+import axios from "axios";
 
 import { EditmodeContext } from "./EditmodeContext";
 import {
-  api,
   renderChunk,
   computeContentKey,
   getCachedData,
@@ -41,6 +41,16 @@ export function useChunk(defaultContent, { identifier, type, contentKey }) {
 
   useEffect(() => {
     // Render content
+    const api = axios.create({
+      baseURL: "https://api2.editmode.com/",
+      headers: {
+        Accept: "application/json",
+      },
+      params: {
+        referrer: window.location.href,
+      },
+    });
+
     let cachedChunk = getCachedData(cacheId);
     let newChunk = cachedChunk
       ? JSON.parse(cachedChunk)

src/useCollectionChunks.js

@@ -1,11 +1,21 @@
 import React, { useEffect, useState } from "react";
-import { api, getCachedData, storeCache } from "./utilities";
+import { getCachedData, storeCache } from "./utilities";
+import axios from "axios";
 
 export function useCollectionChunks(identifier, limit = "", tags = []) {
   const [chunks, setChunk] = useState([]);
   const cacheId = identifier + limit + tags.join("");
 
   useEffect(() => {
+    const api = axios.create({
+      baseURL: "https://api2.editmode.com/",
+      headers: {
+        Accept: "application/json",
+      },
+      params: {
+        referrer: window.location.href,
+      },
+    });
     const cachedChunk = getCachedData(cacheId);
     if (cachedChunk) {
       const data = JSON.parse(cachedChunk);

src/utilities/caching.js

@@ -1,7 +1,13 @@
+const isBrowser = () => typeof window !== "undefined";
+
 export const getCachedData = (id) => {
-  return localStorage.getItem(id);
-}
+  if (isBrowser()) {
+    return localStorage.getItem(id);
+  }
+};
 
 export const storeCache = (id, data) => {
-  localStorage.setItem(id, JSON.stringify(data));
-}
+  if (isBrowser()) {
+    localStorage.setItem(id, JSON.stringify(data));
+  }
+};

src/utilities/index.js

@@ -1,7 +1,6 @@
 export { getCachedData, storeCache } from "./caching";
 export { computeContentKey } from "./computeContentKey";
 export { sanitizeContent } from "./sanitizeContent";
-export { api } from "./api";
 export { transformImage } from "./transformImage";
 export { computeClassName } from "./computeClassName";