removed SSR trpc calls instead SPA for logged in pages #6936

PeerRich · 2023-02-08T12:25:05Z

so far so good on localhost

Why SSR in the first place:

we used to have i18n flickering with CSR but i cant reproduce them anymore. ideally we dont rely on SSR for logged in pages, since its slower

what to test

hard reload some pages
see if i18n keys are flickering
change language in settings

linear · 2023-02-08T12:25:08Z

CAL-1006 Experiment: try dashboard as SPA vs SSR

Posted by @KATT

Heya 👋 come the [suspense](http://app.cal.com|app.cal.com> dashboard is server-side rendered? I feel it would feel faster if you did SPA there and you'd ship faster since it would unlock being able to use <https://trpc.io/docs/suspense) etc

Below is a almost 3s blocking request when toggling between "Availability" and "Booking"

Like, my suggestion would be to get rid of this stuff:

cal.com/apps/web/pages/availability/index.tsx

Lines 121 to 129 in 8c15026

 export const getServerSideProps = async (context: GetServerSidePropsContext) => { 

 const ssr = await ssrInit(context); 

 return { 

 props: { 

 trpcState: ssr.dehydrate(), 

 }, 

 }; 

 };

IIRC that stuff is there because of i18n-flicker, but I'm sure there's an alternative way of dealing with that

Suspense (Experimental) | tRPC

<https://github.com/calcom/cal.com/blob/8c150264f498b8e5d5cfedaebc69465c1dfd2aeb/apps/web/pages/availability/index.tsx | index.tsx>

vercel · 2023-02-08T12:29:32Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated
cal	❌ Failed (Inspect)			Feb 24, 2023 at 1:50AM (UTC)

1 Ignored Deployment

Name	Status	Preview	Comments	Updated
ui	⬜️ Ignored (Inspect)	Visit Preview		Feb 24, 2023 at 1:50AM (UTC)

…a-vs-ssr

AaronPresley · 2023-02-13T23:58:59Z

The main issue I'm seeing on this is that the page no longer updates the UI strings when changing your preferred language under Settings > General. This felt surprising to me, as I double-checked this workflow as part of my previous PR.

I checked out main and am seeing the same problem, so it's not necessarily related to this PR directly. I see there have been several commits relating to header cache since my PR. Might be worth spinning up an issue?

AaronPresley

Looking good overall, despite what I mentioned in this comment which should likely be a new Issue. Otherwise I don't see any flickering.

PeerRich · 2023-02-14T10:11:23Z

Might be worth spinning up an issue?

oh yes please! seems like a regression

PeerRich · 2023-02-14T10:11:46Z

hmm checks failing, and tests. not sure why. maybe @zomars knows more

zomars · 2023-02-14T19:00:35Z

Type checks are failing:

You should be able to click on Details and see that we're trying to use a now removed getServerSideProps in a page

…a-vs-ssr

zomars

Blocking to type fix, also this PR is leaving a lot of unused imports

…a-vs-ssr

github-actions · 2023-02-20T21:04:31Z

📦 Next.js Bundle Analysis

This analysis was generated by the next.js bundle analysis action 🤖

This PR introduced no changes to the javascript bundle 🙌

zomars · 2023-02-20T21:34:44Z

This breaking Embed tests. cc @hariombalhara to help debugging

PeerRich · 2023-02-20T21:43:28Z

apps/web/pages/event-types/index.tsx

@@ -128,17 +125,11 @@ const Item = ({ type, group, readOnly }: { type: EventType; group: EventTypeGrou
 data-testid={"event-type-title-" + type.id}>
 {type.title}
 </span>
- {group.profile.slug ? (


this is not from me :o

before we merge can we undo this? i dont know where this came from @zomars @roae

PeerRich · 2023-02-20T21:43:45Z

apps/web/pages/event-types/index.tsx

 {readOnly && (
- <span className="inline items-center rounded-sm bg-gray-100 px-1.5 py-0.5 text-xs font-medium text-gray-800 ltr:ml-2 ltr:mr-2 rtl:ml-2">
+ <span className="rtl:ml-2inline items-center rounded-sm bg-gray-100 px-1.5 py-0.5 text-xs font-medium text-gray-800 ltr:ml-2 ltr:mr-2">


same here. also typo

Suggested change

<span className="rtl:ml-2inline items-center rounded-sm bg-gray-100 px-1.5 py-0.5 text-xs font-medium text-gray-800 ltr:ml-2 ltr:mr-2">

<span className="rtl:ml-2 inline items-center rounded-sm bg-gray-100 px-1.5 py-0.5 text-xs font-medium text-gray-800 ltr:ml-2 ltr:mr-2">

the span tag is already inline, it is redundant

PeerRich · 2023-02-20T21:44:02Z

apps/web/pages/event-types/index.tsx

- const { t } = useLocale();
- const router = useRouter();
-
- const publishTeamMutation = trpc.viewer.teams.publish.useMutation({
- onSuccess(data) {
- router.push(data.url);
- },
- onError: (error) => {
- showToast(error.message, "error");
- },
- });
-


also not by me

https://github.com/calcom/cal.com/pull/6936/files#r1116335299

…a-vs-ssr

zomars · 2023-02-21T18:48:16Z

Can you take over this PR @roae

…a-vs-ssr # Please enter a commit message to explain why this merge is necessary, # especially if it merges an updated upstream into a topic branch. # # Lines starting with '#' will be ignored, and an empty message aborts # the commit.

…a-vs-ssr

roae

Looking good overall, I never saw any flickering, even changing the language in settings

* removed SSR trpc * Re added debug endpoint * Update me.ts * Fixes unused imports * Rollback unrelated changes --------- Co-authored-by: zomars <zomars@me.com> Co-authored-by: Efraín Rochín <roae.85@gmail.com>

removed SSR trpc

19e31d8

PeerRich linked an issue Feb 8, 2023 that may be closed by this pull request

[CAL-1006] Experiment: try dashboard as SPA vs SSR #6935

Closed

vercel bot had a problem deploying to Preview – ui February 8, 2023 12:29 Failure

vercel bot deployed to Preview – cal February 8, 2023 12:39 View deployment

Merge branch 'main' into 6935-cal-1006-experiment-try-dashboard-as-sp…

13403f1

…a-vs-ssr

vercel bot deployed to Preview – ui February 9, 2023 21:55 View deployment

vercel bot deployed to Preview – cal February 9, 2023 21:59 View deployment

Merge branch 'main' into 6935-cal-1006-experiment-try-dashboard-as-sp…

c940183

…a-vs-ssr

vercel bot deployed to Preview – ui February 11, 2023 15:38 View deployment

vercel bot deployed to Preview – cal February 11, 2023 15:44 View deployment

PeerRich requested a review from AaronPresley February 13, 2023 21:49

Merge branch 'main' into 6935-cal-1006-experiment-try-dashboard-as-sp…

2475c4b

…a-vs-ssr

vercel bot temporarily deployed to Preview – cal February 13, 2023 21:51 Inactive

vercel bot deployed to Preview – ui February 13, 2023 21:56 View deployment

AaronPresley approved these changes Feb 14, 2023

View reviewed changes

PeerRich requested a review from zomars February 14, 2023 10:11

zomars added 3 commits February 14, 2023 13:03

Re added debug endpoint

4535777

Update me.ts

85f28a4

Merge branch 'main' into 6935-cal-1006-experiment-try-dashboard-as-sp…

d78ed0b

…a-vs-ssr

zomars requested changes Feb 14, 2023

View reviewed changes

Fixes unused imports

58024dc

vercel bot deployed to Preview – cal February 14, 2023 21:04 View deployment

Merge branch 'main' into 6935-cal-1006-experiment-try-dashboard-as-sp…

e2dc7d5

…a-vs-ssr

vercel bot had a problem deploying to Preview – cal February 14, 2023 22:01 Failure

vercel bot had a problem deploying to Preview – cal February 20, 2023 21:04 Failure

PeerRich commented Feb 20, 2023

View reviewed changes

Merge branch 'main' into 6935-cal-1006-experiment-try-dashboard-as-sp…

eb0464c

…a-vs-ssr

vercel bot had a problem deploying to Preview – cal February 20, 2023 21:54 Failure

zomars requested a review from roae February 21, 2023 18:48

zomars assigned roae Feb 21, 2023

roae added 2 commits February 22, 2023 18:03

Merge branch 'main' into 6935-cal-1006-experiment-try-dashboard-as-sp…

4d59472

…a-vs-ssr

roae requested a review from a team February 23, 2023 20:52

vercel bot had a problem deploying to Preview – cal February 23, 2023 21:04 Failure

Merge branch 'main' into 6935-cal-1006-experiment-try-dashboard-as-sp…

d3d5521

…a-vs-ssr

vercel bot had a problem deploying to Preview – cal February 23, 2023 21:34 Failure

Merge branch 'main' into 6935-cal-1006-experiment-try-dashboard-as-sp…

751b9ae

…a-vs-ssr

vercel bot had a problem deploying to Preview – cal February 23, 2023 22:11 Failure

PeerRich requested a review from AaronPresley February 23, 2023 22:48

roae approved these changes Feb 23, 2023

View reviewed changes

Rollback unrelated changes

d4454bb

roae requested a review from zomars February 24, 2023 01:41

zomars approved these changes Feb 24, 2023

View reviewed changes

zomars merged commit 9e08cf8 into main Feb 24, 2023

zomars deleted the 6935-cal-1006-experiment-try-dashboard-as-spa-vs-ssr branch February 24, 2023 01:41

vercel bot had a problem deploying to Preview – cal February 24, 2023 01:50 Failure

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

removed SSR trpc calls instead SPA for logged in pages #6936

removed SSR trpc calls instead SPA for logged in pages #6936

PeerRich commented Feb 8, 2023 •

edited

Loading

linear bot commented Feb 8, 2023

vercel bot commented Feb 8, 2023 •

edited

Loading

AaronPresley commented Feb 13, 2023

AaronPresley left a comment

PeerRich commented Feb 14, 2023

PeerRich commented Feb 14, 2023

zomars commented Feb 14, 2023 •

edited

Loading

zomars left a comment

github-actions bot commented Feb 20, 2023 •

edited

Loading

zomars commented Feb 20, 2023

PeerRich Feb 20, 2023

PeerRich Feb 23, 2023

PeerRich Feb 20, 2023

roae Feb 23, 2023

PeerRich Feb 20, 2023

PeerRich Feb 23, 2023

zomars commented Feb 21, 2023

roae left a comment

	<span className="rtl:ml-2inline items-center rounded-sm bg-gray-100 px-1.5 py-0.5 text-xs font-medium text-gray-800 ltr:ml-2 ltr:mr-2">
	<span className="rtl:ml-2 inline items-center rounded-sm bg-gray-100 px-1.5 py-0.5 text-xs font-medium text-gray-800 ltr:ml-2 ltr:mr-2">

removed SSR trpc calls instead SPA for logged in pages #6936

removed SSR trpc calls instead SPA for logged in pages #6936

Conversation

PeerRich commented Feb 8, 2023 • edited Loading

Why SSR in the first place:

what to test

linear bot commented Feb 8, 2023

vercel bot commented Feb 8, 2023 • edited Loading

AaronPresley commented Feb 13, 2023

AaronPresley left a comment

Choose a reason for hiding this comment

PeerRich commented Feb 14, 2023

PeerRich commented Feb 14, 2023

zomars commented Feb 14, 2023 • edited Loading

zomars left a comment

Choose a reason for hiding this comment

github-actions bot commented Feb 20, 2023 • edited Loading

📦 Next.js Bundle Analysis

zomars commented Feb 20, 2023

PeerRich Feb 20, 2023

Choose a reason for hiding this comment

PeerRich Feb 23, 2023

Choose a reason for hiding this comment

PeerRich Feb 20, 2023

Choose a reason for hiding this comment

roae Feb 23, 2023

Choose a reason for hiding this comment

PeerRich Feb 20, 2023

Choose a reason for hiding this comment

PeerRich Feb 23, 2023

Choose a reason for hiding this comment

zomars commented Feb 21, 2023

roae left a comment

Choose a reason for hiding this comment

PeerRich commented Feb 8, 2023 •

edited

Loading

vercel bot commented Feb 8, 2023 •

edited

Loading

zomars commented Feb 14, 2023 •

edited

Loading

github-actions bot commented Feb 20, 2023 •

edited

Loading