Category Archives: Uncategorized

We’ve Moved! Welcome to Our New Blog Home

Exciting news! Our Sitecore blog has a new home: sitecore-insights.dzhurkov.com

This move allows us to create a better experience, more structured content, and improved accessibility for everyone interested in Sitecore, headless CMS, and modern web development.

What’s Changing?

  • Same great insights, tips, and deep dives into Sitecore.
  • A cleaner, more focused space for learning and sharing.
  • Easier navigation and better organization of content.

What You Need to Do?
Update your bookmarks and follow along at sitecore-insights.dzhurkov.com for the latest posts!

Thanks for being part of the journey—this is just the beginning!

My Journey with Next.js: Moving My Blog to the Next Level

As a developer, there comes a time when you feel the itch to revamp your projects—to take them to the next level both in terms of functionality and design. For me, this moment came when I decided to rebuild my blog using Next.js, the React framework that has been making waves in the development community. What started as a curious experiment has quickly turned into a full-fledged migration, and I couldn’t be more excited to share my experience and lessons learned.

Why Next.js?

Before diving into the “how,” let’s talk about the “why.” My previous blog setup was functional but lacked the scalability and modern features that a framework like Next.js provides. Here’s what drew me to Next.js:

  1. Server-Side Rendering (SSR): I wanted better performance and SEO for my blog, and SSR in Next.js is a game-changer for pre-rendering pages.
  2. Static Site Generation (SSG): Many parts of my blog—like older posts—could benefit from being statically generated for blazing-fast load times.
  3. File-Based Routing: Managing routes in Next.js is incredibly intuitive, thanks to its file-based routing system.
  4. Built-In CSS and Image Optimization: Next.js offers native support for optimizing images and managing stylesheets, reducing the number of external dependencies.
  5. Developer Experience: With features like hot reloading, API routes, and TypeScript support, working with Next.js is a joy.

My Training Journey

When I started with Next.js, I was no stranger to React, but I quickly realized that Next.js offers so much more than just a React wrapper. Here’s how I ramped up:

1. Official Documentation

The Next.js documentation became my go-to resource. It’s incredibly well-written and covers everything from the basics to advanced features like dynamic imports and middleware.

2. Building Small Projects

To get a feel for the framework, I built a few small apps, including a cashbook website and a simple short stay apartment page. These projects helped me understand concepts like SSR, SSG, and API routes.

3. Learning by Doing: Migrating the Blog

Once I felt comfortable, I began migrating my blog. This involved:

  • Analyzing the current blog structure: Deciding what should be server-rendered, statically generated, or dynamically loaded.
  • Creating a custom _app.js and _document.js for shared layouts and metadata.
  • Designing with Tailwind CSS: I chose Tailwind for styling, which pairs beautifully with Next.js.
  • Optimizing Images: Leveraging the next/image component for better performance.
  • Fetching Content: Integrating with my CMS using Next.js’s getStaticProps and getServerSideProps.

4. Continuous Learning

I’ve been keeping up with new features introduced in Next.js, such as App Router and React Server Components. Staying updated has been key to building a future-proof blog.

The Current State of the Blog

The blog is still a work in progress, but the transformation is already evident. Here are some of the improvements:

  • Faster Load Times: Thanks to SSG, pages load almost instantly.
  • Improved SEO: Server-rendered pages have significantly boosted my search rankings.
  • Dynamic Features: Components like a tag filter and a comment system are now built with Next.js API routes.
  • Better User Experience: The modern design and optimized performance make for a much smoother reading experience.

Check Out the New Blog (Work in Progress)

I’m thrilled to invite you to explore the new version of my blog, though please note that it’s still under development. You can find it here.

I’d love to hear your thoughts and feedback as I continue refining the site. Let me know what you think!

OneTrust and Sitecore Integration Issues

Introduction

We’ve been experiencing several issues with the integration of OneTrust and our Sitecore websites. Sometimes images fail to load, static JavaScript files are blocked, or even loaded twice. This has affected the functionality of our site, causing disruptions to key components. In this post, I’ll walk you through the challenges we’ve faced, especially regarding a pagination issue, and how we ultimately resolved it.

What is OneTrust?

For those unfamiliar, OneTrust is a platform that helps organizations comply with privacy regulations, including GDPR and CCPA, by managing cookie consent and data privacy settings. It categorizes cookies and scripts into different categories, such as essential, tracking, or marketing cookies, giving users control over which cookies are allowed to run on their browser.

Our OneTrust-Sitecore Integration

Our integration between OneTrust and Sitecore is customized. It includes functionality where content admins can input a OneTrust ID and specify categories of cookies and scripts via Sitecore settings. This allows for flexibility but also introduces complexity that can lead to issues, particularly when changes in cookie consent affect how scripts are loaded on the website.

The Pagination Issue

Recently, we encountered a major issue with our pagination component. Whenever users accepted cookies and refreshed the page, the pagination stopped working altogether. However, if we skipped tracking cookies, everything worked perfectly fine.

I spent hours investigating the problem, trying different configurations, debugging the JavaScript, and examining network calls. Eventually, I found the root cause: OneTrust was adding a category (c004) to our jquery.js script. At the end of the page load, this caused the script to reload—likely with an incorrect MIME type, such as text/plain instead of text/javascript. This misconfiguration broke the functionality of the pagination component, as the required scripts were not being executed properly.

The Final Solution

After much trial and error, the solution turned out to be simple: we needed to add the data-ot-ignore attribute to the <script> tag of jquery.js. This prevented OneTrust from modifying or reloading the script, ensuring that the correct version of the script loaded with the right MIME type.

By adding data-ot-ignore, we bypassed OneTrust’s interference with the script, and the pagination component started working flawlessly again.

Conclusion

Integrating OneTrust with Sitecore offers significant advantages in terms of cookie management and regulatory compliance. However, it can also introduce technical issues like blocked or reloaded scripts. In our case, OneTrust’s script categorization disrupted key components of our site, such as pagination. Fortunately, the fix was straightforward once identified: adding the data-ot-ignore attribute to scripts we wanted to protect from OneTrust’s handling.

If you’re facing similar challenges with OneTrust integration in Sitecore, make sure to carefully investigate how OneTrust is categorizing and managing your scripts, and consider using data-ot-ignore where appropriate to prevent such issues.