Skip to content

Commit

Permalink
feat(site/blog): update article content of ssr timezone
Browse files Browse the repository at this point in the history
  • Loading branch information
qhanw committed Oct 19, 2023
1 parent 55e0f04 commit 468c01d
Showing 1 changed file with 13 additions and 7 deletions.
20 changes: 13 additions & 7 deletions site/blog/posts/ssr-timezone.md
Original file line number Diff line number Diff line change
@@ -1,21 +1,27 @@
---
title: 解决服务端渲染因时区问题导致客户端结果不匹配
title: 时间格式化在SSR下的偏差
date: 2023-10-05T22:35:35+08:00
category: next
tags: [next, js, ssr]
description: 服务端渲染时,因服务器与客户端所在地时区的不同,造成应用在服务器端渲染时,格式化的时间不满足客户端需求的解决方案
description: 在进行SSR服务端渲染时,因服务器与客户端所在地时区的不同,造成应用在服务器端渲染时,格式化后的时间结果与实际结果出现偏差。偏差大小取决于服务器时区与客户端时区差值
---

在习惯了`csr`渲染的今天,我们在处理时间时通常采用时间格式化插件如:`dayjs``moment`(已停止维护)、`date-fns`等时间库来解决,由于是在客户端,因此很少出现时间不正确的问题,因为这些时间插件已经在基于客户端时区环境帮我们处理好了。但在服务端渲染时,由于服务器一般会统一个时区标准,通常为零时区(也称中时区),以此为标准存储、处理时间,因此在服服器渲染时间数据后,呈现给用户的都是以服务器时区为标准的时间。由于不同用户访问所在时区不同,但时间返回又是服务器时间,不符合生活上直观的时间,因此我们该如何解决这类问题呢?

直接查看:[解决方案](#解决方案)

### TOC

### 背景

最近在处理`nextjs`服务端渲染时,遇到时间格式化后在,客户端展示晚上8小时的问题,刚开始想着是如何处理服务器时区问题,因此查找了很多关于修服务器配置,以及更改`nodejs`环境配置的资料,但收效甚微。后来在与做后端的朋友聊及此问题时,发现从一开始我的方向都错了。因此在这里总结一下,以供需要的同学处理类似问题。
最近在处理`nextjs`服务端渲染时,遇到时间格式化后在,客户端展示晚了8小时的问题,刚开始想着是如何处理服务器时区问题,因此查找了很多关于修服务器配置,以及更改`nodejs`环境配置的资料,但收效甚微。后来在与做后端的朋友聊及此问题时,发现从一开始我的方向都错了。因此在这里总结一下,以供需要的同学处理类似问题。

#### 为什么是晚了8小时?
在计算机中时间的生成都是一个唯一值,用UNIX表示则为一个毫秒级整数,我们平常所看见的是格式化后的时间字符串,例如:`2022-22-22 22:22:22`。这个字符会因为我们本地计算机配置的时区不同,而格式化后有所差异,例如,在国内个人计机上时间为: `2022-22-22 22:22:22`,在英国个人计算机上则为: `2022-22-22 14:22:22`,这是因为国内使用的是`东8区`时区时间,英国为`0时区`时间,所以时间上相应偏差8时间。

那么由于,我们程序在服务器上的时间配置为`0时区`,所以在服务器端格式化时间时以`0时区`为基准,而我们在本地计算机访问时,本地计算机时区为`东8区`,所以就出现了格式化后的时间字符串晚8小时的情况。

> 全球共分24个时区,以0时区为基准,向东增加,向西减少,增减为地区对应时区。
**注意:时间是唯一的,本地时间(格式化后时间)是相对的(需要加上时区)**

直接查看:[解决方案](#解决方案)

### 时间相关概念

Expand Down

1 comment on commit 468c01d

@vercel
Copy link

@vercel vercel bot commented on 468c01d Oct 19, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

qhan – ./

qhan-git-main-qhanw.vercel.app
qhan.wang
qhan-qhanw.vercel.app

Please sign in to comment.