Suspense and Server-Side Rendering

[pkellner]

Bug report

Description / Observed Behavior

React 18 and SWR fails on the simplest of examples. I've created a sandbox at this URL: https://codesandbox.io/s/long-cdn-qxkc3v?file=/pages/indexSuspense.js that if your browse (to that page), you'll get the error:

error: The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.

Expected Behavior

I expect to see a page rendered just like at the default root which is in the file /pages/index.js

Repro Steps / Code Example

Run the code sandbox, browse to http://.../indexSuspense and you will get the error I observe

Additional Context

Below is the code from code sandbox along with the associated package.json

import { Suspense } from "react";
import useSWR from "swr";

const fetcher = (url) => fetch(url).then((r) => r.json());

function Profile() {
  const { data } = useSWR("/api/cities", fetcher, {
    suspense: true
  });
  return <pre>{JSON.stringify(data, null, 2)}</pre>;
}

export default function Example() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Profile />
    </Suspense>
  );
}

package.json

{
  "name": "example-react-suspense",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "build": "next build",
    "dev": "next dev",
    "start": "next start"
  },
  "dependencies": {
    "next": "12.1.4",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "swr": "^1.2.2"
  }
}

I've also been testing with the latest canary from next and the latest pre-release from react 18.1 and getting the same errors.

[shuding]

@pkellner I just checked your example, and it turns out that since React 18 now supports Suspense on the server side, that fetch('/api/cities') will happen on the server. So I saw this error:

TypeError: Only absolute URLs are supported
at getNodeRequestOptions ...

which is the root cause. You can't fetch a relative URL (/api/cities) on the server side.

In fact, if you change it to an absolute API like https://api.github.com/repos/vercel/swr it will SSR correctly.

[shuding]

I will keep this issue open until we add more clarification and guidance on Suspense and SSR to the documentation. Let me know if there's any suggestion on this!

[pkellner]

Thanks @shuding for the help here. I'm not sure whether I should continue this issue, as it's related to instability, or start another one, as the problem has morphed but it I think it's still SWR and Suspense instability, as this example I'm about to describe works correctly when using with create-react-app (please let me know and I'll be happy to re-create this as a new issue).

Here is the new problem. I've slightly modified the example shown above to include a simple loop that renders a button with a click event.

https://github.com/pkellner/swr_issue_1906_suspense and associated codesandbox

Actual Behavior

With the component included (that has the suspense boundary and useSwr call), when clicking on any of the three buttons the first time, the click event does not get fired. However, on the 2nd or 3rd click it does fire.

With the component commented out (removed), the button click event fires and you see the console.log message immediately on the first time clicking any row.

Expected Behavior

I expect that when clicking on a button the first time, it will output the console message in the click event whether or not a Suspense element is included in the render.

Aside Note

I've included a slightly more complex source code example here that I'm tracking with an issue on the React repository that has nothing to do with this issue, but points out the complexity of using Suspense compared to not using Suspense. I did the example using create-react-app and not nextjs because of this issue (which just makes the example over there confusing to run). That is, I've brought that example back to this repo running in NextJS. You can browse to that code running with the absorbing click event here by browsing to the URL: http://localhost:3000/indexApp

Associated Relevant Code

import { Suspense } from "react";
import useSWR from "swr";

const fetcher = (url) => fetch(url).then((r) => r.json());

function Profile() {
  //const url = "/api/cities";
  const url = "https://airquality.peterkellner.net/api/city";
  const { data } = useSWR(url, fetcher, {
    suspense: true,
  });
  return <pre>{JSON.stringify(data, null, 2)}</pre>;
}

/*
If comment out call to <Profile /> the console.log on the click event happens correctly.  That is, on the first click.
  If you do not comment out <Profile /> as is shown here, the first time you cick on any of the three rows, the click is not executed until
  the second or third time you click a button.
 */

export default function Example() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      {[1, 2, 3].map((counter) => {
        return (
          <button key={counter}
            onClick={() => {
              console.log(`click Me clicked ${counter}`);
            }}
          >
            Click Me {counter}
          </button>
        );
      })}
      <Profile />
    </Suspense>
  );
}

[gaearon]

It seems a bit confusing to me that useSWR runs on the server at all, given that it's not designed to transfer data to the client. So there is no way for it to hydrate properly. Would it be better to disable useSWR on the server altogether and make it throw until there is some strategy?

[devknoll]

@gaearon yeah, that was one concern I had here.

My feeling is that most suspense-like libraries probably don't properly support SSR, given as how until React 18 it was not possible to run them on the server at all. It might be nice if e.g. updating these libraries to throw during SSR was a more official recommendation?

[shuding]

Yep @gaearon @devknoll this is what we are going to do, there is also #1832 and #1841.

Our plan is to:

• 1.x which is the current version: show a warning if you are using SWR and suspense: true on the server side.
• 2.x which will come in a couple of weeks: change the warning above to an error as its breaking.

The tricky thing is, frameworks do pre-rendering to improve SEO, etc. SWR doesn’t want to run on the server, but unlike fetching data inside an effect, there’s no easy way to skip that with Suspense on the server side, without causing an error.

[shuding]

most suspense-like libraries probably don't properly support SSR

I see this as a general problem of “Suspense for data fetching in SSR” though.

But still, if the data is not going to cause a mismatch (e.g. fully static, or “almost” static as hydration happens very soon after SSR, usually), Suspense in SSR still makes sense.

[gaearon]

My understanding from a convo with @sebmarkbage is that a proper solution for useSWR is to take “initial data” argument. That’s taken from getServerSideProps on the server. Which means it also becomes available on the client for hydration. The initial fetch happens by calling the actual implementation (not /api/ route) from the server itself. So there’s also no “absolute URL” problem because there’s no fetch call on the server at all. Then useSWR on the client hydrates with that initial data. And for future navigations on the client useSWR does actual requests.

Then you only need to throw if you’re on the server and data wasn’t preloaded.

[stefee]

@gaearon See “Fallback Data” https://swr.vercel.app/blog/swr-v1#fallback-data

“Pre-Rendering with Default Data” https://swr.vercel.app/docs/with-nextjs#pre-rendering-with-default-data

[pkellner]

@shuding , do you have any insight now into a path forward to supporting Suspense with SWR? Above you mentioned I believe, that you plan on disabling the suspense: true option shortly. Is that still your thinking?

I'm also wondering if whether using CRA vs NextJS has any impact on this. I'm assuming that Suspense integration with CRA is just as broken on CRA as it is on Next but I'm not 100% clear on that. If your implementation does work correctly for CRA with Suspense enabled, I'd love to know that for sure. I understand from @gaearon that CRA integration might not work either.

Thanks for paying attention to this. I can't say much more publicly, but I have managed to delay my course work on React 18 with Suspense until this is sorted.