Zero-Bundle Is Not a Myth! Exploring React Server Components Globalization Package

Learn the major role React Server Components play in shrinking bundle size and boosting web performance, and how KendoReact goes even further.

In the fast-paced and ever-evolving world of software development, we continually face the challenge of enhancing performance. Imagine constructing a digital realm where the efficiency of your creation depends not on the pure volume of code but on the scary metric of bundle size. Enter React Server Components, quietly but effectively guiding developers toward a more streamlined digital journey.

In this blog post, we will dive into the intricate web of code, exploring how React Server Components play a major role in shrinking bundle size and boosting web performance. Additionally, we’ll touch upon Progress’ efforts to develop a globalization package that achieves close to zero bundle size. This innovation acts as a silent force, helping developers remove unnecessary weight—much like a ship optimizing its load for a smoother and more enjoyable voyage.

Join us on this exploration as we uncover hidden costs, explore the impact of React Server Components and showcase our progress in creating a lightweight and efficient web development experience.

What Is Globalization?

In the quest for creating your digital realm, you notice that the main income of your realm is from tourism. We would like to have a lot of traffic from other neighboring digital realms, which means that we would need to speak many different languages and have vast cultural knowledge. This is a prime scenario for globalization.

Think of globalization as a tool for making your digital realm multilingual and culturally savvy. It breaks down to:

• Localization: Transforms you into a linguistic chameleon, seamlessly switching UI languages like a digital polyglot.
• Internationalization (i18n): Imagine your realm becoming a voyager, ready to adapt its structure to any locale with ease.
• Cultural considerations: Your realm changes, depending on the cultural outfit of its guests, adjusting date formats and visuals.
• Time and date formats: Time-traveling through date formats, effortlessly switching between MM/DD/YYYY and DD/MM/YYYY as it hops across time zones.
• Numeric formats: Numbers become global citizens, learning to mingle with various counting systems and currency symbols.

If you can master these elements, your world becomes more globalized.

KendoReact Server Globalization Beats Bundle Size

Moving in the direction of a multilingual and multicultural realm, incorporating CLDR libraries like cldr-core, cldr-numbers-full and cldr-dates-full will increase bundle size, specifically when creating realms that support multiple languages. For example:

• cldr-core: This library includes comprehensive locale data, potentially adding unnecessary weight if your application only targets specific languages or regions.
• cldr-numbers-full: Extensive number formatting data, such as decimal separators and currency symbols, contributes to larger bundles, especially if not all locales are needed.
• cldr-dates-full: Similarly, the exhaustive date and time formatting information may lead to increased bundle size, impacting loading times.

Chasing the big dream of optimizing web applications, where the burden of big data weight heavily impacts performance, you stumble upon KendoReact Server Components Globalization Package. Smoothly managing locale-specific data, this package accomplishes more than just efficiency; it achieves a remarkable feat—a cutback in bundle size to absolute zero for localization and nearly zero for internationalization.

KendoReact Server Internationalization

Imagine crafting an app with support for four, five or even more languages—a scenario that typically translates to a hefty burden on the bundle size:

// cld-core
import likelySubtags from "cldr-core/supplemental/likelySubtags.json"; 169.2k (gzipped: 53.8)
import currencyData from "cldr-core/supplemental/currencyData.json"; 8.1k (gzipped: 2.8l)
import weekData from "cldr-core/supplemental/weekData.json"; 35.4k (gzipped: 12.4k)

// Spanish Local Info

// cldr-numbers-full
import esNumbers from "cldr-numbers-full/main/es/numbers.json"; 4.4k (gzipped: 1.2k)
import esLocaleCurrency from "cldr-numbers-full/main/es/currencies.json"; 37.5k (gzipped: 6.4k)

// cldr-dates-full
import esCaGregorian from "cldr-dates-full/main/es/ca-gregorian.json"; 8.7k (gzipped: 2k)  
import esDateFields from "cldr-dates-full/main/es/dateFields.json"; 18.4k (gzipped: 1.7k)
import esTimeZoneNames from "cldr-dates-full/main/es/timeZoneNames.json"; 25.4k (gzipped: 5.5k)

// Greek Locale Info

// cldr-numbers-full
import elNumbers from "cldr-numbers-full/main/el/numbers.json"; 5.4k (gzipped: 1.4k)
import elLocaleCurrency from "cldr-numbers-full/main/el/currencies.json"; 53k (gzipped: 7.7k)

// cldr-dates-full
import elCaGregorian from "cldr-dates-full/main/el/ca-gregorian.json"; 8.2k (gzipped: 2.1k)  
import elDateFields from "cldr-dates-full/main/el/dateFields.json"; 20.8k (gzipped: 2.1k)
import elTimeZoneNames from "cldr-dates-full/main/el/timeZoneNames.json"; 41.8k (gzipped: 9.9k)

// ...other languages with their locale information

The strategic addition of these imports serves as pieces of the key that unlocks the gates of internationalization for your app.

In the quest for making your app speak the language of users far and wide, there is a formidable challenge: bundle size lurking in the shadows, and its sole purpose is to slow down your web app.

Enter KendoReact Server Internationalization, a game-changer that neatly addresses this challenge. It tackles the zero-bundle concept of RSC by sending only crucial locale information to the client, leaving the bulk of data comfortably nestled on the server. This approach not only streamlines the development process but also facilitates a more efficient and responsive application.

And the neat part is, the KendoReact Server Internationalization feature provides you with a way to parse and/or format dates and numbers either on the server or on the client. To learn more, visit our Internationalization docs.

KendoReact Server Localization

In addition to the app above, a web app would also want to translate messages in order to speak everyone’s language. But here’s the thing: learning more languages for global users is like adding extra weight to its digital backpack. So, while your app gets friendlier to users worldwide, the size of the code bundle it carries around grows a bit. Just a heads-up—more languages mean a bigger digital backpack!

KendoReact Server Localization is like a superhero for your app. It pulls off some magic tricks so your app doesn’t have to carry around that extra language weight. It cleverly stores all those language messages on the server, so it doesn’t add any bulk to the bundle size on the client side. Your app can be multilingual without any extra baggage, keeping all the language messages tucked away on the server and preventing them from adding any load to the client side. To learn more, visit our Localization docs.

Try It Now

Ready to make your web app more robust and less packed with client bundle size? Give KendoReact Server Globalization a try. Head over to the KendoReact Server Globalization docs and let us know what you think by leaving your feedback on GitHub or by dropping us a line in the support forum.

Don’t forget, KendoReact comes with a free 30-day trial. Try it today!