Search icon
Subscription
0
Cart icon
Close icon
You have no products in your basket yet
Arrow left icon
All Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Newsletters
Free Learning
Arrow right icon
JavaScript Design Patterns

You're reading from  JavaScript Design Patterns

Product type Book
Published in Mar 2024
Publisher Packt
ISBN-13 9781804612279
Pages 308 pages
Edition 1st Edition
Languages
Author (1):
Hugo Di Francesco Hugo Di Francesco
Profile icon Hugo Di Francesco

Table of Contents (16) Chapters

Preface 1. Part 1:Design Patterns
2. Chapter 1: Working with Creational Design Patterns 3. Chapter 2: Implementing Structural Design Patterns 4. Chapter 3: Leveraging Behavioral Design Patterns 5. Part 2:Architecture and UI Patterns
6. Chapter 4: Exploring Reactive View Library Patterns 7. Chapter 5: Rendering Strategies and Page Hydration 8. Chapter 6: Micro Frontends, Zones, and Islands Architectures 9. Part 3:Performance and Security Patterns
10. Chapter 7: Asynchronous Programming Performance Patterns 11. Chapter 8: Event-Driven Programming Patterns 12. Chapter 9: Maximizing Performance – Lazy Loading and Code Splitting 13. Chapter 10: Asset Loading Strategies and Executing Code off the Main Thread 14. Index 15. Other Books You May Enjoy

Static generation with dynamic paths

It can be useful to pre-generate pages with dynamic paths and contents.

We could use getServerSideProps and render the pages on demand. In the context that we’re working in, that would be valid for a “cart” page.

getServerSideProps is server-side rendering, as we’ve seen previously. The reason a cart page should probably be server-rendered is that it can change very quickly, based on end user interaction. An example of a page that is dynamic but wouldn’t change quickly based on an end user action is a “view single product” page. We’ll see how to statically generate that after the cart page example.

We create a pages/cart.js file, where we provide the following getServerSideProps, which loads the cart, figures out the relevant product IDs (per cart content), and loads them (in order to display some information about them):

export async function getServerSideProps({ query }) {
 ...
lock icon The rest of the chapter is locked
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at $15.99/month. Cancel anytime}