Next.js Discord

Discord Forum

Checkout/payments

Answered
Forster's Tern posted this in #help-forum
Open in Discord
Forster's TernOP
I have an online ordering app that strictly uses apis for data fetching and checkout/order calculation. What is the best approach to use for checkout process and keep it ssr? Should I use Middleware definitely?
Answered by B33fb0n3
You can SSR most of your app and dynamically switch to CSR for the checkout flow using a client-side framework like React.

Server-Side API Calls: Leverage your server to make API calls during the SSR phase, fetching necessary data for the checkout process.

Caching: Implement caching mechanisms for frequently accessed data during the checkout process.

You might use middleware to validate user sessions or tokens before allowing access to the checkout flow.

Progressive Enhancement: Render the basic structure of the checkout page on the server and then enhance it on the client-side by attaching event handlers or additional interactive elements.

Optimized Payloads: Ensure that the data payloads for checkout are optimized to reduce the data transfer required during the SSR phase.

A combination of the mentioned strategies might suit your app's needs best, allowing you to maintain SSR while ensuring a smooth and interactive checkout process.
@Forster's Tern
View full answer

3 Replies

You can SSR most of your app and dynamically switch to CSR for the checkout flow using a client-side framework like React.

Server-Side API Calls: Leverage your server to make API calls during the SSR phase, fetching necessary data for the checkout process.

Caching: Implement caching mechanisms for frequently accessed data during the checkout process.

You might use middleware to validate user sessions or tokens before allowing access to the checkout flow.

Progressive Enhancement: Render the basic structure of the checkout page on the server and then enhance it on the client-side by attaching event handlers or additional interactive elements.

Optimized Payloads: Ensure that the data payloads for checkout are optimized to reduce the data transfer required during the SSR phase.

A combination of the mentioned strategies might suit your app's needs best, allowing you to maintain SSR while ensuring a smooth and interactive checkout process.
@Forster's Tern
Answer