[Feature]: Can i use like `Suspense.CSROnly` in SuspensiveProvider?

[minsoo-web]

Package Scope

• [x] Add to an existing package
• [ ] New package

Package name: @suspensive/react

Overview

In this case, I want to use Suspense with Delay component So, I tempt to use suspensiveProvider

But In my source code base, using browser API like localStorage, document.referrer (because We use MSA, app is render in iframe) so I can't use suspensiveProvider with my code

Api call with axios instance, header setted by getting info from iframe's parent.

So I change SuspensiveProvider to Suspense.CSROnly

with 'use client'; in the top

Describe the solution you'd like

I want to use Suspense.CSROnly with Delay component So, I want to SuspensiveProvider support CSR case.

Additional context

"@suspensive/react": "^1.14.8", "@suspensive/react-query": "^1.14.8", "react": "18.2.0", "next": "13.4.12", (app router)

[manudeli]

I want to use Suspense.CSROnly with Delay component So, I want to SuspensiveProvider support CSR case.

@minsoo-web I think I didn't clearly understand what you want in the issue. It would be better if you could explain in more detail what you want or show the need for this issue with code through a Pull Request.

[minsoo-web]

I think I didn't clearly understand what you want in the issue. It would be better if you could explain in more detail what you want

First, sorry for my poor English skill, here is my example code situation in stackblitz

Problem situation

You can edit in this editor, and remove downside comment on SuspensiveProvider. Then you can see the error log from terminal when refreshing

What I want

I didn't clearly understand what you want in the issue

What I want is, I want to settig CSR option to SuspensiveProvider

[manudeli]

@minsoo-web First of all, thank you for recreating the situation. I checked the code you reproduced on Stackblitz and could see the error too

It appears that the problem occurred when axios interceptor tried to get a token using a document object that does not exist on the server side of Next.js.

However, it seems difficult to know how this problem is related to adding the CSR option to SuspensiveProvider. In my opinion, Suspense.CSROnly fills this role and we should use it. I need more details about your requirements. Please give us more feedback on what interface you would like to use as TO-BE code.

[minsoo-web]

Thank you for checking this issue,

it seems difficult to know how this problem is related to adding the CSR option to SuspensiveProvider

What I want is using SuspensiveProvider with CSR option.

Suspense.CSROnly fills this role and we should use it.

I know this is working properly, but it isn't give delay option

you can check this isn't work properly Suspense.CSR with Delay component

Please give us more feedback on what interface you would like to use as TO-BE code.

const suspensive = new Suspensive({
  defaultOptions: {
    delay: {
      ms: 1200,
    },

    suspense: {
      fallback: <Spinner />,
      isCSR: true, // what I want interface
    },
  },
})

[minsoo-web]

Apart from the above, I misunderstood the role that the delay option of SuspensiveProvider plays.

I understood that fallback is maintained during delay time.

For example, if you set delay to 3s and fetching finished in 1s, I understood it as a structure in which fallback is maintained for 4s.

In fact, when I checked on this link, I thought that even if I gave the delay option to SuspensiveProvider, it seemed to show the rendering success case right away without delay.

---

This issue seems to have been more difficult to understand due to the combination of the two.

1. Delay is just a role that delays rendering

However, I misunderstood it as showing fallback while delaying rendering.

2. Suspense.CSROnly does not have a delay option.

So why not give CSR options to SuspenseProvider? It was a suggestion that.

[manudeli]

const suspensive = new Suspensive({
  defaultOptions: {
    delay: {
      ms: 1200,
    },

    suspense: {
      fallback: <Spinner />,
      isCSR: true, // what I want interface
    },
  },
})

@minsoo-web You left TO-BE code as like this, but I still couldn't understand what you exactly want. What is it for isCSR of suspense? I need to know what you expect if isCSR is turned on.

Intention of Delay

When I see your example using <Delay/>, I think more explanation is needed as to why the <Delay/> was added in @suspensive/react, We thought there were a lot of cases where I didn't want to show the fallback of <Suspense/> right away. This is because in cases where the API response comes almost immediately, the fallback of <Suspense/> can actually worsen the user experience. This article provides a good example of such case. I thought that <Delay/> should be provided so that @suspensive/react users can control it as needed.

const Example = () => {
  return (
    <Suspense fallback={<Delay><Skeleton/></Delay>}>
      <SuspendComponent />
    </Suspense>
  )
}

Intention of SuspensiveProvider

Currently, <SuspensiveProvider/> is just context provider to provide defaultOptions to <Suspense/>, <Delay/> for reducing duplicated code for them So I expected them use it like below example

const suspensive = new Suspensive({
  defaultOptions: {
    delay: {
      ms: 200
    },
    suspense: {
      fallback: <Delay><Spinner/></Delay>
    }
  }
})

const Example = () => {
  return (
    <SuspensiveProvider value={suspensive}>
      <Suspense> // This Suspense will use default fallback provieded by SuspensiveProvider, so it will show `<Delay><Spinner/></Delay>` on children make suspense
        <SuspendComponent />
      </Suspense>
      <Suspense>
        <SuspendComponent />
      </Suspense>
      <Suspense fallback={<Delay><Skeleton/></Delay>}> // When `<Delay><Skeleton/></Delay>` need to be shown instead of default `<Delay><Spinner/></Delay>`, we can override default if we need
        <SuspendPostList />
      </Suspense>
    </SuspensiveProvider>
  )
}

[manudeli]

@minsoo-web I made this issue to provide more detail of all apis than before

[manudeli]

@minsoo-web Could you update or close for this issue?

[minsoo-web]

I'm so sorry for late. I will check that issue. And this issue is deprecated, so I will close