Skip to content

Latest commit

 

History

History
88 lines (68 loc) · 3.24 KB

README.md

File metadata and controls

88 lines (68 loc) · 3.24 KB
Raw

next13-fetch-cache-issue-template

This repo is made in order to help Next.js to replicate this cache issue

Repo structure:

  • backend, a simple server that will generate JSON responses with different payload sizes.
  • next-app, a simple next app that will generate a page using a fetch request to get data from the backend.

Important to know

  • the Next.js pages 'my-app\app\test[id]\page.jsx' is using server side rendering.
  • the fetch used to populate the Next.js test pages uses the revalidate option, so the request should be stored in the Next.js cache.
  • the test Next.js pages will request data to the backend, and every request will have a different response payload size.
  • the payload size will increase following the increase of the 'id' requested

Next.js Issue

If the payload is too big, an issue is coming out:

Failed to set fetch cache http://localhost:4000/test_req TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11576:11)
    at async globalThis.fetch (D:\Illuminem\old\next13-fetch-cache-issue-template\my-app\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:127:62909)
    at async invokeRequest (D:\Illuminem\old\next13-fetch-cache-issue-template\my-app\node_modules\next\dist\server\lib\server-ipc\invoke-request.js:17:12)
    at async invokeIpcMethod (D:\Illuminem\old\next13-fetch-cache-issue-template\my-app\node_modules\next\dist\server\lib\server-ipc\request-utils.js:45:21)
    at async D:\Illuminem\old\next13-fetch-cache-issue-template\my-app\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:127:66497 {
  cause: Error: read ECONNRESET
      at TCP.onStreamRead (node:internal/stream_base_commons:217:20)
      at TCP.callbackTrampoline (node:internal/async_hooks:130:17) {
    errno: -4077,
    code: 'ECONNRESET',
    syscall: 'read'
  }
  • The issue is not present if the cache of the fetch is disabled.
  • The issue is present if the cache of the fetch is enabled, and the response payload is approximately more than: 69KB
  • Tested with different computers the error occurs with different BASE_SIZE values, so if you don't see the error please increase the BASE_SIZE.

How to use that repo

INIT

  • cd backend
  • yarn install
  • cd ..
  • cd my-app
  • yarn install

RUN TEST USE-CASE

  • open a new terminal inside the backend folder
  • node server.js
  • open a new terminal inside my-app folder
  • yarn build

SETTINGS, how to switch between different use-case

  • you should not change the backend

  • in order to change the use-case, you should only change the file: 'my-app\app\config.js'

  • TEST_PAGE_COUNT --> How many pages to build

  • BASE_SIZE --> The JSON response payload size

  • REVALIDATE --> Enable/disable fetch cache

The JSON response payload size. The real request size increases by: idBASE_SIZE. Considering size=idBASE_SIZE, the size number will generate a JSON with 'size' fields plus the "id" field. Considering x as the current field in [0,'size']. Every field x will be a string with x chars. Example:

id=2;
BASE_SIZE=2;
size=id*BASE_SIZE=4;
result:{
    id:2,
    test_0:"x",
    test_1:"xx",
    test_2:"xxx",
    test_3:"xxxx"
}

if REVALIDATE is true, the fetch will use the cache and the revalidate. if REVALIDATE is false, the fetch will not use the cache.